添加自动播放到ytplayer
添加自动播放到ytplayer
提问于 2017-02-18 08:00:04
如何将自动播放添加到以下代码中？
下面的HTML和JavaScript代码显示了一个简单的示例，该示例将一个YouTube播放器插入到id值为ytplayer的页面元素中。加载IFrame播放器应用编程接口代码后，将自动调用此处指定的onYouTubePlayerAPIReady()函数。此代码没有定义任何播放器参数，也没有定义其他事件处理程序。
<div id="ytplayer"></div>
<script>
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
height: '360',
width: '640',
videoId: 'M7lc1UVf-VE'
});
}
</script>回答 3
Stack Overflow用户
发布于 2019-06-16 23:14:59
您可以使用playerVars，添加'autoplay‘属性并将其设置为1
var player = new YT.Player('youtube_videos_url', {
playerVars: { 'autoplay': 1 },
});Stack Overflow用户
发布于 2017-06-20 14:39:50
您必须在onPlayerReady事件上调用playVideo()。
function onPlayerReady(event) {
event.target.playVideo();
}完整代码如下：
<!DOCTYPE html>
<html>
<body>
<!-- 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',
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) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>Stack Overflow用户
发布于 2017-06-20 14:59:55
我以前已经在我的项目中这样做了，所以要这样做，请按照以下步骤操作
step-1
添加iframe，其中我们的youtube视频是load.Do，如下所示
<iframe width="100%" height="378" id="youtube_url" allowfullscreen="1" class="vjs-default-skin" src="https://www.youtube.com/embed/Rk6_hdRtJOE?wmode=opaque&enablejsapi=1&version=3&autoplay=0&controls=0&playerapiid=youtube_player&rel=0&showinfo=0" frameborder="0">
</iframe>Step2
然后添加YouTube iframe API
<script src="https://www.youtube.com/iframe_api"></script>Step-3
然后使用此代码创建YouTube接口对象，并使用该对象来控制视频，如自动播放等。
var player = new YT.Player('youtube_videos_url', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
function onPlayerReady(event) {
player.playVideo();
}这段代码将运行时，我们的视频加载，然后player.playVideo();自动播放你的视频。
我想这会对你有帮助的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42309425
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号