Youtube - onStateChange工作在一个视频,但不是另一个
Youtube - onStateChange working on one video but not another
相同的代码行为不同,当你改变YouTube视频ID。
问题是,当你拉进度滑块时,它会在一个视频上触发onStateChange事件,而不是另一个。检查下面的两个示例,并尝试在两个示例上拉时间滑块,并查看console.log。
为什么当你拉时间滑块时,只有一个视频对onStateChange做出反应?
两个视频反应良好的播放/暂停按钮,但不是时间滑块…只有一个在工作
我错过了什么吗?非常感谢任何帮助
Youtube代码1 (working):(http://jsfiddle.net/2t9omgwm/)
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
iv_load_policy: 3,
showinfo:0,
//videoId: 'Fj73JF_bhjc',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
//event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
console.log('state changed');
//player.seekTo(0, true);
if (event.data == YT.PlayerState.PLAYING && !done) {
done = true;
}
}
</script>
在另一个视频中它不起作用:(http://jsfiddle.net/ctgomt7t/)
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: '0Bmhjf0rKe8',
iv_load_policy: 3,
showinfo:0,
//videoId: 'Fj73JF_bhjc',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
//event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
console.log('state changed');
//player.seekTo(0, true);
if (event.data == YT.PlayerState.PLAYING && !done) {
done = true;
}
}
</script>
"
触发onPlayerStateChange
事件的原因如下:
-1 = unstarted
0 = end
1 = play
2 = pause
3 =
5 =
我认为你在较长的视频中看到的是当你移动滑块时触发(3)缓冲的事件。然而,在较短的视频中,没有缓冲,所以你看不到事件。
您可以通过修改代码来读取console.log('state changed : ' + event.data)
来看到这一点。
相关文章:
- 我如何才能包含一个iframe视频,这样它就不会't负载
- jQuery:在for循环中运行youtube视频,播放最后一个视频
- 使用video-js构建一个包含字符串的HTML视频
- 我将如何在 jquery 中为 html5 视频制作一个 playTo() 函数
- 我如何让网页在每次使用 Javascript 刷新时随机生成一个新视频
- 浏览器同步摄像头加速视频播放不是一个功能
- 从另一个域中查找视频位置宽度视频
- 我正在从API提取一个包含视频的Object标签.如何在javascript中暂停视频
- 弹出模式jquery播放现有的嵌入youtube视频时,试图播放另一个
- Node.js:获取一个mp4文件的视频和音频格式信息
- Youtube视频是一个直播
- 背景视频是由ScrollMagic一开始的最后一个场景触发的
- 可以编写一个预先加载所有图像和视频的JavaScript程序
- 如何添加id和额外的参数到一个放大弹出iframe与youtube视频,所以我可以控制与API youtube播放器
- 视频标签仅在移动设备上调用一个字节的数据(Node.js)
- HTML5 视频在开始播放另一个视频时暂停使用 Javascript
- 在 html 页面上一次播放一个视频
- 我希望我的视频在点击时更改为另一个视频,我该怎么做
- 在html5视频播放器中一个接一个地播放视频
- 如何使用Javascript动态地播放多个youtube或vimeo视频一个接一个