如何使用javascript或jquery降低视频的播放速度?

时间:2013-08-21 09:16:09

标签: javascript jquery html5-video

我为HTML5编写这样的代码,它运行正常。

<video id="video" controls="controls" autoplay="autoplay" name="media"><source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"></video>

<button onclick="document.getElementById('video').playbackRate+=0.1">playbackRate+=0.1</button>
<button onclick="document.getElementById('video').playbackRate-=0.1">playbackRate-=0.1</button><br>

对于JWplayer,我怎样才能像上面那样加快/提高播放速度?

<script type="text/javascript">
    jwplayer("myElement").setup({
        file: "http://media.w3.org/2010/05/sintel/trailer.mp4",
        title: "test",
        height: 400,
        width: 600,
        autostart: true,
        autoplay: true,
    });

    jwplayer("myElement").onTime(function(time){
        showComments(Math.round(time.position));
    })
</script>

1 个答案:

答案 0 :(得分:1)

this post中所述,JW Player支持仅在html5渲染模式下控制播放速度,在这种情况下,您可以通过它呈现的视频标签的选项来控制它。它看起来像这样:

<script type="text/javascript">
    function changePlaybackRate(rateChange) {
        if (jwplayer().getRenderingMode() == "html5") {
            var videoTag = document.querySelector('video');
            if (videoTag.playbackRate) {
                videoTag.playbackRate += rateChange;
            }
        }

        //Small hack to work around a Firefox bug    
        if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
            jwplayer().seek(jwplayer().getPosition());
        }
    };
</script>

<button onclick="changePlaybackRate(0.1)">playbackRate+=0.1</button>
<button onclick="changePlaybackRate(-0.1)">playbackRate-=0.1</button>

当浏览器不通过HTML5本身支持时(例如使用Flash播放器时),JW Player不支持播放速度控制