javascript 如何在 jwplayer 中更改播放速率
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18310305/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change playback rate in jwplayer
提问by Hitesh
I want to change the playback speed of video in HTML5 mode of jwplayer. I am not interested in flash browser, we will be restricting this feature only for HTML5 browsers
我想在 jwplayer 的 HTML5 模式下更改视频的播放速度。我对 Flash 浏览器不感兴趣，我们将仅对 HTML5 浏览器限制此功能
Issue: I tried changing the playbackrate for HTML5 in jwplayer but playbackrate is coming undefined i am attaching my code below
问题：我尝试在 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;
});
1st alert coming as 1
2nd alert coming undefined
3rd alert is showing "source"
4th alert is 1
第一个警报为 1
第二个警报未定义
第三个警报显示“来源”
第四个警报为 1
I am able to catch the div but not able to change the playback rate in jquery !!!
我能够捕捉到 div 但无法在 jquery 中更改播放速率！！！
following above link i also tried with java script and it worked using code below
按照上面的链接，我也尝试过使用 java 脚本，它使用下面的代码工作
(document.getElementsByTagName('video')[0].playbackRate=0.2.
but if i use above code how do i use this for multiple video since there is no ID involved in above code [no unique id is passed for above javascript]
但是如果我使用上面的代码，我如何将它用于多个视频，因为上面的代码中没有涉及 ID [上面的 javascript 没有传递唯一的 ID]
Below is the div structure for the jwplayer 
下面是 jwplayer 的 div 结构
采纳答案by Adolfo Augusto Rodrigues
https://developer.jwplayer.com/jw-player/demos/advanced/set-playback-rate/
https://developer.jwplayer.com/jw-player/demos/advanced/set-playback-rate/
only add line playbackRateControls in .setup()
仅在 .setup() 中添加行播放率控制
jwplayer('user-player').setup({
playlist: 'https://cdn.jwplayer.com/v2/media/gaCRFWjn',
// Set the available playback rates of your choice
playbackRateControls: [0.75, 1, 1.25, 1.5]
});
回答by Hitesh
I found the answer for this, main issue which i faced for multiple video was how to make each video unique.i just had to get div by ID first and after get 'Video' tag than change playbackrate
adding the code below
我找到了这个问题的答案，我在多个视频中面临的主要问题是如何使每个视频都是唯一的。我只需要先通过 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)
I even tried with multiple video, it worked fine
我什至尝试了多个视频，效果很好
回答by andylukem
Found this script manually manipulating the DOM for custom speeds:
发现此脚本手动操作 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>
Instead of toggle like the excellent blogpost from Ethan there are speed buttons.
不是像 Ethan 的优秀博文那样切换，而是有速度按钮。
Just setting a custom speed:
只需设置自定义速度：
document.querySelector('video').playbackRate=0.80;
回答by Iansen
Just add ids to your videos and use document.getElementsById (id) instead of document.getElementsByTagName.
只需将 id 添加到您的视频并使用 document.getElementsById (id) 而不是 document.getElementsByTagName。
document.getElementsById('yourid').playbackRate=0.2
回答by emaxsaun
I wrote a blog post about a how to do this in the JW Player, by the way. It might be helpful! - http://www.longtailvideo.com/blog/33860/slow-motion-with-jw-player
顺便说一下，我写了一篇关于如何在 JW Player 中执行此操作的博客文章。它可能会有所帮助！- http://www.longtailvideo.com/blog/33860/slow-motion-with-jw-player
