Youtube视频暂停时停止事件
Youtube video stop on pause event
我的网站页面上有几个带有电视频道的youtube iframe。
<div>
<iframe id="ytplayer" src="https://www.youtube.com/embed/ntBxGznOML0?rel=0&enablejsapi=1&autoplay=0&controls=1&showinfo=0&loop=1&iv_load_policy=3&modestbranding=0" frameborder="0" allowfullscreen></iframe>
</div>
<div>
<iframe id="ytplayer" src="https://www.youtube.com/embed/zl4aeAfhdro?rel=0&enablejsapi=1&autoplay=0&controls=1&showinfo=0&loop=1&iv_load_policy=3&modestbranding=0" frameborder="0" allowfullscreen></iframe>
</div>
<div>
<iframe id="ytplayer" src="https://www.youtube.com/embed/URD4UWm-edg?rel=0&enablejsapi=1&autoplay=0&controls=1&showinfo=0&loop=1&iv_load_policy=3&modestbranding=0" frameborder="0" allowfullscreen></iframe>
</div>
<div>
<iframe id="ytplayer" src="https://www.youtube.com/embed/75j9l956bVs?rel=0&enablejsapi=1&autoplay=0&controls=1&showinfo=0&loop=1&iv_load_policy=3&modestbranding=0" frameborder="0" allowfullscreen></iframe>
</div>
我正在尝试使用一个java脚本来播放静音视频,并在暂停事件时停止它,但它对我不起作用
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('ytplayer', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerStateChange(event){
player.stopVideo(0);
}
}
function onPlayerReady(event) {
player.mute();
player.playVideo();
}
我需要在暂停事件中完全停止视频,因为这是电视直播频道,所以如果我现在按下暂停,10分钟后我会得到一个记录,但不是直播。我怎样才能让我的剧本发挥作用?
更新
OP有多个播放器,使用纯JavaScript,以下更改为:
- 多个玩家共享相同的id,现在每个玩家都有一个唯一的id
- 为每个玩家添加一个
<button class='stop' data-id='yt*'>STOP</button>
。- 每个按钮都有一个
data-id
。它的值对应于玩家的id
- 每个按钮都有一个
- 包裹着
<section id='videoChannels'></section>
。- 将
eventListener
添加到#videoChannels
,因此当点击按钮时,#videoChannels
被称为target.currentTarget
,其可以与event.target
进行比较以确定被点击的按钮(即event.target
) - 在
capture eventPhase
之后,事件链到达event.target
(被点击的按钮),并且在与该按钮对应的播放器上调用函数ytCommand()
(参见步骤2)
- 将
工作演示
柱塞
停止YouTube播放器
- 使用
contentWindow
方法访问iframe - 通过iframe与
postMessage
API进行下一次跨域通信是可能的 - YouTube iFrame API的下一篇文章命令
相关规范
$('#stop').on('click', function() {
$('#ytPlayer')[0].contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
});
工作演示
FIDDLE
代码段
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Stop YTPlayer</title>
</head>
<body>
<section id="videoChannels">
<div>
<iframe id="yt0" class="player" src="https://www.youtube.com/embed/8IzxdjVr5ZI?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<button class='stop' data-id='yt0'>STOP</button>
</div>
<div>
<iframe id="yt1" class="player" src="https://www.youtube.com/embed/AhenpCh6BO4?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<button class='stop' data-id='yt1'>STOP</button>
</div>
<div>
<iframe id="yt2" class="player" src="https://www.youtube.com/embed/HrmF-mPLybw?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<button class='stop' data-id='yt2'>STOP</button>
</div>
<div>
<iframe id="yt3" class="player" src="https://www.youtube.com/embed/6KouSwLP_2o?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<button class='stop' data-id='yt3'>STOP</button>
</div>
</section>
<script>
var vidCh = document.getElementById('videoChannels');
vidCh.addEventListener('click', ytCommand, false);
function ytCommand(event) {
if (event.target != event.currentTarget) {
var btn = event.target.getAttribute('data-id');
var ytp = document.getElementById(btn);
ytp.contentWindow.postMessage('{"event":"command","func":"' + 'stopVideo' + '","args":""}', '*');
}
}
</script>
</body>
</html>
相关文章:
- Mozilla没有;t在附加视频src后触发视频后台事件
- Facebook嵌入视频事件
- ReactJS:如何使用react正确播放带有onClick事件的html5视频
- 如何在HTML5视频中获得寻找事件的起点
- iOS/HTML5上的视频相关事件跟踪
- HTML5视频readyState与事件侦听器
- 将Backbone事件与HTML5视频播放事件结合使用
- 使用Chrome扩展内容脚本检测youtube视频事件
- 我该如何融入由Brightcove主持的视频结尾引发的事件
- Html 5视频停止事件
- 如何从视频标记错误事件中获取字符串/消息或代码
- 如何在HTML视频达到特定时间标记时触发事件
- iOS上未触发HTML5视频事件
- 在html5视频播放事件上捕获视频源
- 如何捕捉视频的事件ExitFullScreen
- jwplayer在80%的视频上调用事件
- HTML5视频-等待事件未启动
- JQuery 收听视频事件
- 视频.JS - 一次在确切时间触发多个事件
- 结束事件视频不工作