当您更改 YouTube 视频 ID 时,相同代码的行为会有所不同。
问题是,当您拉动进度 slider 时,它会在一个视频上触发 onStateChange 事件,但不会在另一个视频上触发。检查下面的两个示例,并尝试在两个示例上拉动时间 slider 并观察您的 console.log。
当您拉动时间 slider 时,为什么只有一个视频对 onStateChange 使用react?
两个视频都对播放/暂停按钮 react 良好,但对时间 slider 没有反应……只有一个在工作。
我错过了什么吗?非常感谢任何帮助
Youtube 代码 1(有效): ( 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 = ended
1 = playing
2 = paused
3 = buffering
5 = video cued
我认为您在较长的视频中看到的是当您移动 slider 时为 (3) 缓冲触发的事件。但是,在较短的视频中没有缓冲,因此您看不到事件。
您可以通过将代码更改为读取 console.log('state changed : ' + event.data)
来看到这一点。
关于javascript - Youtube - onStateChange 处理一个视频而不是另一个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31701959/