JWPLAYERカスタマイズとオーディオストリーミング

JWPLAYERを使用して2つの質問があります。私は多くの場所で検索しましたが、回答は得られませんでした。特にaudio streamingはJWPLAYERです。JWPLAYERカスタマイズとオーディオストリーミング

Question1：

私はm3u8とtsaws-elastic-transcoderを使用してチャンクと成功したストリーミングビデオにビデオファイルをトランスコードに取り組んでいます。

今、オーディオファイルをストリーミングしたいと思います。

オーディオファイルは、m3u8とtsチャンクに分割するのと同じプロセスに従いますか？どのような特別な構成が必要ですか。どのようなオーディオファイルがサポートされていますか？オーディオのHD品質トグルも必要です。どのように達成するのですか？

Question2：

私は私のJWPLAYER、特にAUDIO playerをカスタマイズしたいです。 control-barにさまざまなボタンを追加したいと思います。

コントロールバー
ダウンロードボタン
現在のキューの一覧を表示するボタンでシャッフルボタン
画像。（キューイングするオーディオファイルに HLSを追加する方法）
リピートボタン
Aの設定ボタン

ので、基本的な私は完全なプレーヤーをカスタマイズしたいです。どうすればこれを実現できますか？ JWPLAYER HTML全体をどのように変更できますか？

利用可能な場合は、任意の参照URLを指定してください。ここで

は

JWOptions = { 
     id: "myPlayer2", 
     "playlist": [{ 
     "file": "https://s3.amazonaws.com/mypath1/index.m3u8", 
     "image": "assets/img/bg1.jpg", 
     "title": "Sintel Trailer", 
     "mediaid": "ddra573" 
     }, { 
     "file": "https://s3.amazonaws.com/mypath2/index.m3u8", 
     "image": "assets/img/bg2.jpg", 
     "title": "Big Buck Bunny Trailer", 
     "mediaid": "ddrx3v2" 
     }], 
     width: 800, 
     height: 40, 
    }

はありがとうございました、私のオプションです。

出典

2017-05-17 Sravan

約1）：ビデオ用のAAC（m4a）オーディオファイルに変換できます。高品質ではないAAC-LCコーデックと高品質オーディオではHE-AACを使用できます。 jwPlayerの設定はビデオと同じですが、動作しますが、必要に応じて設定することができます。

約2）：この例のようにコントロールバーにアイテムを追加することができます。http://codepen.io/fdambrosio/pen/XRpBvW 4つまたは5つのアイテムを追加すると、デフォルトのjwplayerコントロールバーにうまく収まりきらないと思います。最小とjwplayerは異なるスタイルのデスクトップに感謝のアイテムを示しています。

HTML：

<body> 
    <div id='radioplayer'></div> 
</body>

CSS：

#change-speed {font-size: 16px; color: white; padding-left: 5px; margin-right: 5px;}

JS：ここで説明したよう

var playerInstance = jwplayer("radioplayer"); 
    playerInstance.setup({ 
    file:'//video.radioradicale.it:1935/store-86/_definst_/mp4:2015/01/MQ781257.mp4/playlist.m3u8', 
    width:544, 
    height: 306, 
    androidhls: true, 
    autostart: true, 
}); 

var tag; 

    jwplayer("radioplayer").on('ready', function(){ 

     if (jwplayer("radioplayer").getProvider().name == "html5" | jwplayer("radioplayer").getProvider().name == "shaka") { 
      console.log('1X'); 
      var normale = document.createElement("div"); 
      normale.id = "change-speed"; 
      normale.setAttribute('class','jw-reset jw-text jw-icon-inline'); 
      normale.innerHTML = "1x"; 
      document.getElementsByClassName('jw-controlbar-right-group')[0].appendChild(normale); 

       tag = document.querySelector('video'); 
       tag.defaultPlaybackRate = 1.0; 
       tag.playbackRate = 1.0; 

       $('#change-speed').on('click', function() { 
     console.log('test'); 
       speed_bfr = tag.playbackRate; 

       console.log(speed_bfr, 'prima'); 
       switch(speed_bfr) { 
       case 1.0: 
       console.log('1.0'); 
       normale.innerHTML = "1.5x"; 
       tag.playbackRate = 1.5; 
       break; 

       case 1.5: 
       console.log('1.5'); 
       normale.innerHTML = "1x"; 
       tag.playbackRate = 1.0; 
       break; 

       } 

      }); 

     } 
    });

はまた、ポスター画像の上に一つだけのボタン（。元のダウンロード）を追加することができます：https://developer.jwplayer.com/jw-player/demos/basic/add-download-button/

それ以外の場合は、JwPlayer APIを使用して、カスタムコントロールバーを開発したり、プレーヤーの近くにボタンを追加することができます。https://developer.jwplayer.com/jw-player/docs/javascript-api-reference/

出典

2017-05-17 12:55:56 Francesco

JWPLAYERカスタマイズとオーディオストリーミング

答えて

関連する問題