仅嵌入和循环播放 YouTube 视频的一部分 (html5)
embed and loop just a part of a youtube video (html5)
有没有办法使用 HTML5 播放器循环播放 YouTube 视频的一部分?我试过这段代码(开始 7 秒,结束 12 秒)
第一个"loop"显示我想要的部分,第二个和其他循环显示整个视频。
它在 Flash 中工作,但我在 HTML 5 的移动设备中遇到问题。
这是我的嵌入代码:
<iframe allowfullscreen="" frameborder="0" width="960" height="720" src="http://www.youtube.com/embed/Bpu0TIXzI1w?version=3&start=7&end=12&autohide=1&hl=en_US&rel=0&loop=0&modestbranding=1&playlist=Bpu0TIXzI1w"></iframe>
您可能需要使用 Javascript API。它有点复杂,但您可以完全控制视频播放。
文档:https://developers.google.com/youtube/iframe_api_reference
工作示例:http://jsfiddle.net/pbosakov/Lo6gwtff/
代码:
<div id="player"></div>
<script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
<script type="text/javascript">
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'Bpu0TIXzI1w',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
loopStart();
player.playVideo();
}
function loopStart() {
player.seekTo(7); // Start at 7 seconds
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
setTimeout(loopStart, 5000); // After 5 seconds, restart the loop
}
}
</script>
有没有办法使用 HTML5 播放器循环播放 YouTube 视频的一部分?我试过这段代码(开始 7 秒,结束 12 秒)
第一个"loop"显示我想要的部分,第二个和其他循环显示整个视频。
它在 Flash 中工作,但我在 HTML 5 的移动设备中遇到问题。
这是我的嵌入代码:
<iframe allowfullscreen="" frameborder="0" width="960" height="720" src="http://www.youtube.com/embed/Bpu0TIXzI1w?version=3&start=7&end=12&autohide=1&hl=en_US&rel=0&loop=0&modestbranding=1&playlist=Bpu0TIXzI1w"></iframe>
您可能需要使用 Javascript API。它有点复杂,但您可以完全控制视频播放。
文档:https://developers.google.com/youtube/iframe_api_reference
工作示例:http://jsfiddle.net/pbosakov/Lo6gwtff/
代码:
<div id="player"></div>
<script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
<script type="text/javascript">
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'Bpu0TIXzI1w',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
loopStart();
player.playVideo();
}
function loopStart() {
player.seekTo(7); // Start at 7 seconds
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
setTimeout(loopStart, 5000); // After 5 seconds, restart the loop
}
}
</script>