Html Youtube 自动播放无法在带有嵌入式 HTML5 播放器的移动设备上运行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15090782/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Youtube autoplay not working on mobile devices with embedded HTML5 player
提问by theowi
To my problem, i have one link <a href="http://www.youtube.com/embed/YT-ID" class="overlay_video"></a>. I want to play the video by clicking the link in a fancybox overlay window. This is not a problem. The problem is the parameters, for example "autoplay" or "autohide".
对于我的问题，我有一个链接<a href="http://www.youtube.com/embed/YT-ID" class="overlay_video"></a>。我想通过单击fancybox 覆盖窗口中的链接来播放视频。这不是问题。问题在于参数，例如“自动播放”或“自动隐藏”。
The following link don't work:
以下链接无效：
<a href="http://www.youtube.com/embed/YT-ID?autoplay=1" class="overlay_video"></a>
The Overlay-Window opened, but the video is not playing automatically.
覆盖窗口打开，但视频没有自动播放。
EDIT: I want to use the HTML5 Player on mobile devices. On a desktop-browser it works with the parameters, but not on mobile devices.
编辑：我想在移动设备上使用 HTML5 播放器。在桌面浏览器上，它适用于参数，但不适用于移动设备。
回答by orzechow
As it turns out, autoplay cannot be done on iOS devices (iPhone, iPad, iPod touch) and Android.
事实证明，无法在 iOS 设备（iPhone、iPad、iPod touch）和 Android 上进行自动播放。
See https://stackoverflow.com/a/8142187/2054512and https://stackoverflow.com/a/3056220/2054512
见https://stackoverflow.com/a/8142187/2054512和https://stackoverflow.com/a/3056220/2054512
回答by Zubi
Have a look on code below. Tested and found working on Mobile and Tablet devices.
看看下面的代码。测试并发现适用于移动和平板电脑设备。
<!-- 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>
回答by Mark
The code below was tested on iPhone, iPad (iOS13), Safari (Catalina). It was able to autoplay the YouTube video on all devices. Make sure the video is mutedand the playsinlineparameter is on. Those are the magic parameters that make it work.
下面的代码在 iPhone、iPad (iOS13)、Safari (Catalina) 上进行了测试。它能够在所有设备上自动播放 YouTube 视频。确保视频已静音并且playinline参数已打开。这些是使其工作的神奇参数。
<!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>
回答by Chilly8
There is a way to make youtube autoplay, and complete playlists play through. Get Adblock browser for Android, and then go to the youtube website, and and configure it for the desktop version of the page, close Adblock browser out, and then reopen, and you will have the desktop version, where autoplay will work.
有一种方法可以让 youtube 自动播放，并播放完整的播放列表。获取 Android 版 Adblock 浏览器，然后访问 youtube 网站，并将其配置为页面的桌面版本，关闭 Adblock 浏览器，然后重新打开，您将拥有桌面版本，自动播放将在其中工作。
Using the desktop version will also mean that AdBlock will work. The mobile version invokes the standalone YouTube player, which is why you want the desktop version of the page, so that autoplay will work, and so ad blocking will work.
使用桌面版本也意味着 AdBlock 可以工作。移动版本调用独立的 YouTube 播放器，这就是为什么您需要页面的桌面版本，以便自动播放可以工作，因此广告拦截也可以工作。
