Youtube 自动播放不能在嵌入 HTML5播放器的移动设备上运行

小开

最佳答案

事实证明，自动播放不能在 iOS 设备(iPhone、 iPad、 iPod touch)和 Android 上进行。

参见 https://stackoverflow.com/a/8142187/2054512和 https://stackoverflow.com/a/3056220/2054512

小开

有一种方法可以使 youtube 自动播放，并完成播放列表播放通过。为 Android 获取 Adblock 浏览器，然后登录 youtube 网站，并为该页面的桌面版进行配置，关闭 Adblock 浏览器，然后重新打开，这样就有了桌面版，自动播放功能就可以工作了。

使用桌面版本也意味着 AdBlock 可以工作。移动版本调用独立的 YouTube 播放器，这就是为什么你想要桌面版本的网页，这样自动播放将工作，所以广告屏蔽将工作。

小开

看看下面的代码。在移动和平板设备上测试和发现工作。

<!-- 1. The <iframe> (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>

小开

下面的代码在 iPhone，iPad (iOS13) ，Safari (Catalina)上进行了测试。它可以在所有设备上自动播放 YouTube 视频。确保视频是静音和 Playsinline参数是打开的。这些就是让它运作的神奇参数。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0, user-scalable=yes">
</head>
<body>
<!-- 1. The <iframe> (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', {
width: '100%',
videoId: 'osz5tVY97dQ',
playerVars: { 'autoplay': 1, 'playsinline': 1 },
events: {
'onReady': onPlayerReady
}
});
}


// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.mute();
event.target.playVideo();
}
</script>
</body>
</html>

小开

官方声明“由于这个限制，自动播放、 playVideo ()、 loadVideoById ()等功能和参数不能在所有移动环境中工作。

参考资料: https://developers.google.com/youtube/iframe_api_reference

小开

如何使用 Youtube 频道实时网址嵌入和自动播放。而不是视频 ID，必须不断更新的实时流变化。

我混合了两套代码，想出了一个工作自动播放 Youtube 视频嵌入从频道直播流。

我要感谢其他两位捐助者的帮助，希望这能帮助到其他人。

示例流 Https://www.youtube.com/embed/live_stream?channel=ucwobzuc3z-0prfporxnszxq

Zubi 在11月25日7点20分回答了下面的代码，这些代码与 Youtube 视频一起工作。

Darien Chaffart 的代码

Https://stackoverflow.com/a/61126012/1804252

例子

<html>
<head>






</head>
<body>
<center>






<script src="https://www.youtube.com/iframe_api"></script>


<!-- Insert Livestream Video -->
<iframe id="live-video" src="https://www.youtube.com/embed/live_stream?channel=UCwobzUc3z-0PrFpoRxNszXQ&enablejsapi=1" width="100%" height="100%" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen enablejsapi="1"></iframe>


<!-- Basic API code for Youtube videos -->
<script>
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('live-video', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady() {
var url = player.getVideoUrl(); /*Use Youtube API to pull Video URL*/
var match = url.match(/[?&]v=([^&]+)/);
var videoId = match[1]; /*Use regex to determine exact Video URL*/
// Insert a new iFrame for the livestream chat after a specific div named chatframe*/
var livevid = document.createElement("iframe");
livevid.src = 'https://www.youtube.com/live_chat?v=' + videoId + ''
livevid.width = '100%';
livevid.height= '100%';
document.getElementById("chatframe").appendChild(livevid);
}
function onPlayerStateChange() {
}


    

function onPlayerReady(event) {
event.target.playVideo();
}


// 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, 90000000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
       

</script>






</center>
</body>
</html>