在自定义按钮单击中播放 iframe 内的 youtube 视频
Posted
技术标签:
【中文标题】在自定义按钮单击中播放 iframe 内的 youtube 视频【英文标题】：play the youtube video which is inside iframe in custom button click 【发布时间】：2017-05-11 13:29:28 【问题描述】：我想使用 jquery 在自定义按钮单击中播放嵌套 iframe 中的 youtube。
jQuery(document).ready(function($)
$(".playButton").click(function()
$(".flex-active-slide .player")[0].src += "?autoplay=1";
);
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="playButton">Play button</div>
<iframe>
<html>
<body>
<div class="embedVideo">
<div class="player">
<iframe src="//www.youtube.com/embed/sqpKq6k04vk?width%3D640%26amp%3Bheight%3D360%26amp%3Bautoplay%3D0%26amp%3Bvq%3Dlarge%26amp%3Brel%3D0%26amp%3Bcontrols%3D1%26amp%3Bautohide%3D2%26amp%3Bshowinfo%3D1%26amp%3Bmodestbranding%3D0%26amp%3Btheme%3Ddark%26amp%3Biv_load_policy%3D1%26amp%3Bwmode%3Dopaque">
<html>
<body>
<div id="player">
<div class="html5-videoPlayer">
<video ></video>
</div>
</div>
</body>
</html>
</iframe>
</div>
</div>
</body>
</html>
</iframe>【问题讨论】：
看到这个：http://***.com/questions/6246939/start-play-embedded-iframe-youtube-video-on-click-of-an-image
【参考方案1】：
您需要使用YouTube Player API
这是一个简单的解决方案
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<button id="play">Play</button>
<button id="stop">Stop</button>
<div id="video-placeholder"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
var player;
function onYouTubeIframeAPIReady()
player = new YT.Player('video-placeholder',
height: '390',
width: '640',
videoId: '6plKMU0tTTk', // insert your video id here - example: https://www.youtube.com/watch?v=6plKMU0tTTk
);
$( document ).ready(function()
$('#play').on('click', function ()
player.playVideo();
);
$('#stop').on('click', function ()
player.pauseVideo();
);
);
</script>
</body>
</html>
【讨论】：
【参考方案2】：更新了 jsfiddle 上的代码位置。请查看以下链接以获取您的解决方案
[https://jsfiddle.net/rbs02hr8/1/][1]
参考网站
https://codepen.io/martinwolf/pen/dyLAC
【讨论】：
以上是关于在自定义按钮单击中播放 iframe 内的 youtube 视频的主要内容，如果未能解决你的问题，请参考以下文章