3

jwplayerのHTML5モードで動画の再生速度を変えたいです。Flash ブラウザには興味がありません。この機能は HTML5 ブラウザのみに制限されます。

問題: jwplayer で HTML5 の再生速度を変更しようとしましたが、再生速度が未定義になりました。以下にコードを添付しています。

    jwplayer('my-video').setup({
                 sources: [
                      {file:'./test.mp4' , type: "mp4" },
                     ],
                 width:'640px',
                 height:'360px', 
                 image : './test.jpg'
              });
$("#speed_10").click(function() {
        myVid=$( "#my-video" ).find('.jwvideo').find('video');
        alert(myVid.length);

        alert($( "#my-video" ).find('.jwvideo').find('video').attr('src'))
        alert(myVid.playbackRate)
        alert($( "#my-video" ).find('.jwvideo').find('video').length)
        $( "#my-video" ).find('.jwvideo').find('video').PlaybackRate=0.5; 

 });

最初のアラートは 1 として
来る 2 番目のアラートは未定義
である 3 番目のアラートは「ソース」を示している
4 番目のアラートは 1 である

div をキャッチすることはできますが、jquery で再生レートを変更することはできません !!!

http://www.longtailvideo.com/support/forums/jw-player/feature-suggestions/32556/playbackrate-support/

上記のリンクをたどって、Javaスクリプトも試してみましたが、以下のコードを使用して機能しました

(document.getElementsByTagName('video')[0].playbackRate=0.2.

しかし、上記のコードを使用する場合、上記のコードにはIDが含まれていないため、これを複数のビデオに使用するにはどうすればよいですか[上記のJavaScriptには一意のIDが渡されません]

以下は、jwplayer の div 構造です。jwplayer の HTML5 構造

4

5 に答える 5

10

これに対する答えを見つけました。複数のビデオで直面した主な問題は、各ビデオを一意にする方法でした。最初にIDでdivを取得し、「ビデオ」タグを取得した後、再生率を変更
して以下のコードを追加する必要がありました

var video = document.getElementById('exampleId')
var video_speed = video.getElementsByTagName('video')[0]
alert(video_speed.playbackRate)

video_speed.playbackRate=0.2;
alert(video_speed.playbackRate)

複数のビデオでも試してみましたが、うまくいきました

于 2013-08-19T11:23:34.240 に答える
3

カスタム速度のためにDOMを手動で操作するこのスクリプトを見つけました：

<script type="text/javascript">
  jwplayer("video").setup({
      image: 'https://<your_CDN_ID>.cloudfront.net/static/splash/<splash.png>',
      width: 960,
      height: 600,
      flashplayer: "https://<your_CDN_ID>.cloudfront.net/assets/jwplayer.flash.swf",
      html5player: "https://<your_CDN_ID>.cloudfront.net/assets/jwplayer.html5.js",
      primary: 'html5',
      sources: [
          { file: 'https://<your_CDN_ID>.cloudfront.net/static/videos/<video>.mp4' },
          { file: 'https://<your_CDN_ID>.cloudfront.net/static/videos/<video>.webm' }
      ]
  });

  var tag;

  jwplayer().onReady(function(){
    if (jwplayer().getRenderingMode() == "flash") {
      return;
    }

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

    jwplayer().addButton("https://<your_CDN_ID>.cloudfront.net/assets/25.png", "", function(){
      jwplayer().seek(jwplayer().getPosition());
      tag.playbackRate = 0.25;
    },"025");

    jwplayer().addButton("https://<your_CDN_ID>.cloudfront.net/assets/05.png", "", function(){
      jwplayer().seek(jwplayer().getPosition());
      tag.playbackRate = 0.5;
    },"05");

    jwplayer().addButton("https://<your_CDN_ID>.cloudfront.net/assets/1.png", "", function() {
      jwplayer().seek(jwplayer().getPosition());
      tag.playbackRate = 1.0;
    },"1");

    jwplayer().addButton("https://<your_CDN_ID>.cloudfront.net/assets/125.png", "", function() {
      jwplayer().seek(jwplayer().getPosition());
      tag.playbackRate = 1.25;
    },"125");

    jwplayer().addButton("https://<your_CDN_ID>.cloudfront.net/assets/15.png", "", function() {
      jwplayer().seek(jwplayer().getPosition());
      tag.playbackRate = 1.5;
    },"15");

    jwplayer().addButton("https://<your_CDN_ID>.cloudfront.net/assets/2.png", "", function() {
      jwplayer().seek(jwplayer().getPosition());
      tag.playbackRate = 2.0;
    },"2");

  });

</script>

Ethan の優れたブログ投稿のようなトグルの代わりに、スピード ボタンがあります。

カスタム速度を設定するだけです：

document.querySelector('video').playbackRate=0.80;
于 2016-05-24T22:22:59.343 に答える
2

動画に ID を追加して、document.getElementsByTagName の代わりに document.getElementsById (id) を使用するだけです。

document.getElementsById('yourid').playbackRate=0.2
于 2013-08-19T09:42:10.310 に答える