javascript - YouTube iframe Player API:控制已经在 HTML 中的 MULTIPLE iframe 播放器
问题描述
我知道以前有人问过这个问题。但是,答案已过时,我还需要多个 iframe 播放器的其他信息。
我遵循了Google Developers website的代码。但是,当我尝试调用event.target.playVideo();
, insideonPlayerReady(event) function
时,页面第一次加载时视频没有播放。
我也收到此错误消息GET https://i.ytimg.com/vi_webp/M7lc1UVf-VE/sddefault.webp?v=516f0b27 404
现在,我正在展示 2 个视频和Play video 1
、Stop video 1
、Play video 2
和Stop video 2
工作的示例。当有很多视频时,我如何设置代码以便嵌入它们更紧凑?谢谢您的帮助。
var tag = document.createElement('script');
tag.id = 'iframe-demo';
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player1;
var player2;
function onYouTubeIframeAPIReady() {
player1 = new YT.Player('existing-iframe-example1', {
events: {
'onReady': onPlayerReady1
}
});
player2 = new YT.Player('existing-iframe-example2', {
events: {
'onReady': onPlayerReady2
}
});
}
function onPlayerReady1(event) {
event.target.playVideo();
$(function() {
$('#play-btn1').on('click', function() {
event.target.playVideo();
});
$('#stop-btn1').on('click', function() {
event.target.stopVideo();
});
});
}
function onPlayerReady2(event) {
event.target.playVideo();
$(function() {
$('#play-btn2').on('click', function() {
event.target.playVideo();
});
$('#stop-btn2').on('click', function() {
event.target.stopVideo();
});
});
}
.control { margin-bottom: 30px; }
.play-btn, .stop-btn { display: inline-block; margin: 10px 20px; color: blue; cursor: pointer; }
.play-btn:hover, .stop-btn:hover { color: orange; cursor: pointer; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<iframe id="existing-iframe-example1" width="640" height="360" frameborder="0" allowfullscreen src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&enablejsapi=1&controls=1&rel=0&color=white"></iframe>
<div class="control">
<div id="play-btn1" class="play-btn">Play video 1</div>
<div id="stop-btn1" class="stop-btn">Stop video 1</div>
</div>
<iframe id="existing-iframe-example2" width="640" height="360" frameborder="0" allowfullscreen src="https://www.youtube.com/embed/5a2oZwB6zX0?autoplay=1&enablejsapi=1&controls=1&rel=0&color=white"></iframe>
<div class="control">
<div id="play-btn2" class="play-btn">Play video 2</div>
<div id="stop-btn2" class="stop-btn">Stop video 2</div>
</div>
解决方案
推荐阅读
- django - 遵循Mozilla django教程时出现异常“unhashable type:'list'”
- r - 识别和总结 R 中的离散节点组
- python - RGB 到 HSI 转换 - 色调始终计算为 0
- xamarin - android.os.FileUriExposedException 错误 - XAMARIN
- c++ - OpenMP for循环并行问题
- python - wxPython:计算器不会在 Textctrlenter 中显示值
- java - Java 如果一个数字是 -0
- python - 一个衬垫使用 j 将嵌套列表变成一个列表
- java - GraphQL java:当请求有未使用的变量时抛出异常
- javascript - 以角度 6 加载特定于组件的 Js 和 CSS