播放当前视频时如何停止其他视频?JavaScript
How stop the other videos when current is playing ? JavaScript
我有一个带有不同视频的网络应用程序(Youtube+DailyMotion)
几个小时以来,我一直在寻找如何停止Youtube iframe视频,或在播放current时停止其他Youtube DailyMotion视频。
或者如何仅启用全屏视频。我只是想避免在同一时间播放超过1个视频。
如果你知道视频id,你可以用程序渲染视频播放器:
加载youtube API并定义占位符(#playList)
<script src='//www.youtube.com/player_api'></script>
<div id='playList'>
<!--// placeholder -->
</div>
页面加载:
var playList = [
{ videoId: 'aEHIgjoueeg', player: null, $el: null },
{ videoId: 'c5NcaVp2-5M', player: null, $el: null },
{ videoId: 'IA88AS6Wy_4', player: null, $el: null }
];
function onStateChange (e) {
if (YT.PlayerState.PLAYING === e.data) {
console.log(this, e);
// stop others
$.each(playList, function (i, item) {
if (item.videoId === this.videoId) {
return true;
}
if (item.player) {
item.player.stopVideo();
}
}.bind(this));
}
}
var $playList = $('#playList');
$.each(playList, function (i, item) {
item.$el = $('<div id="'+ item.videoId +'"></div>');
$playList.append(item.$el);
item.player = new window.YT.Player(item.videoId, {
width: 300, height: 200,
videoId: item.videoId,
playerVars: { autoplay: 0 },
events: {
onStateChange: onStateChange.bind(item)
}
});
});
Inside onStateChange:如果当前视频正在播放,则停止其他视频http://jsfiddle.net/34hysaes/
您可以尝试制作与youtube和dailymotion的特定API交互的代码,但您可以只使用JS来替换iframe节点或其源属性。这意味着视频也不会继续在后台加载,以防这是同一视频的其他来源。
http://jsfiddle.net/wesakm78/
function selectVideo(e) {
document.getElementById("videoFrame").src = e.target.getAttribute("data-source");
}
document.getElementById("youtubeButton").addEventListener("click", selectVideo);
document.getElementById("dailyButton").addEventListener("click", selectVideo);
<button id="youtubeButton" data-source="https://www.youtube.com/embed/dQw4w9WgXcQ">YouTube</button>
<button id="dailyButton" data-source="//www.dailymotion.com/embed/video/xsdji">Dailymotion</button>
<iframe id="videoFrame" width="480" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
我有一个想法是可行的,但在许多浏览器上似乎很古怪。使用风险自负,因为我在铬(但不是铬)上找到了光标,当我进入窗口时,光标就会消失。
基本思想是跟踪我们在DOM中可以访问的事件——在这种情况下,我只是在跟踪mouseover,但您可能也需要检查其他事件。当你用鼠标悬停在一个视频上时,它会遍历其他视频,重复它们的iframe节点,删除原始视频并替换它。这本质上是通过删除视频并将其添加回视频来"停止"视频。如果你添加一些更智能的逻辑,你可以使它只对可能正在播放的视频(即你已经用鼠标点击过的视频)执行此操作。
document.addEventListener('DOMContentLoaded', function() {
var windows = [];
var getVids = function() {
return document.querySelectorAll('.youtube');
};
var vids = getVids();
[].forEach.call(vids, function(video) {
// Build window list of iframes
video.addEventListener('mouseover', function(ev) {
[].forEach.call(vids, function(othervid) {
if (othervid !== video) {
var newvid = othervid.cloneNode(true);
var parent = othervid.parentNode;
parent.insertBefore(newvid, othervid);
parent.removeChild(othervid);
// Reset to new vid list
vids = getVids();
}
});
});
});
});
我意识到这需要一些工作才能在您的实现中顺利运行,但希望这个概念足以让您开始。
- 播放当前视频时如何停止其他视频?JavaScript
- Jquery未定义函数正在停止其他操作
- 输入类型=文件验证停止其他输入类型验证
- 如何停止html5视频时关闭其内联弹出窗口,跨浏览器
- 如何停止HTML5视频
- 如何使用JQuery在SharePoint中停止音频/视频
- 停止youtube视频并替换为图像
- 如何在iOS/iPad上进入全屏模式时停止HTML5视频播放器
- 引导模式的目标 id,用于在模式关闭时停止播放视频
- Canvas-使用其他视频中的alpha数据遮罩视频的速度较慢
- 多功能 javascript 停止其他如果警报取消
- Javascript 在关闭时停止 HTML 5 视频
- 如果没有其他视频播放,请播放视频
- 如何通过单击包含其他视频 src [Java 脚本] 的链接来获得视频 src
- 停止其他点击事件
- 如何在模式窗口关闭时使用 HTML5 停止为视频
- Javascript setTimeout 会停止其他脚本执行吗?
- 如果视频不在浏览器视图中,但未重新启动,则停止播放视频
- 如何优雅地停止html5视频播放
- 如何停止HTML5中的所有其他视频当一个启动