Youtube 自动播放无法在具有嵌入式 HTML5 播放器的移动设备上运行
Posted
技术标签:
【中文标题】Youtube 自动播放无法在具有嵌入式 HTML5 播放器的移动设备上运行【英文标题】：Youtube autoplay not working on mobile devices with embedded HTML5 player 【发布时间】：2013-02-12 00:03:16 【问题描述】：对于我的问题，我有一个链接<a href="http://www.youtube.com/embed/YT-ID" class="overlay_video"></a>。我想通过单击fancybox 覆盖窗口中的链接来播放视频。这不是问题。问题在于参数，例如“自动播放”或“自动隐藏”。
以下链接失效：
<a href="http://www.youtube.com/embed/YT-ID?autoplay=1" class="overlay_video"></a>
覆盖窗口打开，但视频没有自动播放。
编辑：我想在移动设备上使用 HTML5 播放器。在桌面浏览器上，它适用于参数，但不适用于移动设备。
【问题讨论】：
问题一定出在其他地方，因为您的语法与fancybox演示中的语法完全相同：<a class="various iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">Youtube (iframe)</a>并且自动播放没有问题。你如何调用fancybox？
为了调用fancybox，我使用标准的sn-p，例如$(".overlay_video").fancybox( 'width' : 95%, [..] 'type' : ' iframe' );
我忘记了一个小细节。描述中的新信息。对不起。
哦，这改变了很多 :D 根据 Youtube API，自动播放参数也适用于 html5 播放器。你用的是什么设备？
【参考方案1】：
事实证明，自动播放无法在 ios 设备（iPhone、iPad、iPod touch）和 android 上进行。
见https://***.com/a/8142187/2054512和https://***.com/a/3056220/2054512
【讨论】：
谢谢 :) 我稍后会在我的安卓平板电脑上测试它。 顺便说一句 - 其他参数，如 autohide 或 rel 功能齐全。 :) 是的，因为 Apple 希望最终避免移动设备上不必要的流量 - 这只会影响自动播放功能；） 我明白 ;) 好的，android (4.2.2) 也一样。 这是不正确的。它可以在 iOS 上完成，请参阅下面的答案。【参考方案2】：看看下面的代码。 经过测试，发现可以在移动设备和平板设备上运行。
<!-- 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>
【讨论】：
嗨！我试过你的代码，它确实有效！做得好！但是，我在 iPad 上的 Safari 8 中发现了一个异常，它开始加载视频并且永远不会结束，除非您停止然后播放它。有人有什么建议吗？ （使用 setTimeout 触发暂停和播放不起作用...） iOS 似乎有一个更新，要求您在播放视频之前将其静音，如果您希望它自动播放。如果你打电话给 event.target.mute();就在 event.target.playVideo(); 之前你应该很好。 通过这个解决方案，我设法在最新的 safari OS high Sierra 上自动播放 youtube，但在 iphone 上运气不佳。 虽然这适用于您在本示例中使用的 youtube 视频，但不适用于我指向的 youtube 视频。我收到此错误：拒绝从以下代码在 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() 运行时，它可能会阻止我的设备由于不活动而超时（这是为了节省电池寿命）。您能否确认这一点并可能提供另一种解决方案？ @4ndy，但这是个问题吗？我的意思是，如果我打开要观看的视频（无论它是否自动播放），我不希望我的设备的屏幕在我观看视频时因为不活动而关闭。 只有在静音时才有效【参考方案4】：官方声明“由于此限制，autoplay、playVideo()、loadVideoById()等函数和参数将无法在所有移动环境中使用。
参考：https://developers.google.com/youtube/iframe_api_reference
【讨论】：
视频静音后自动播放。【参考方案5】：有一种方法可以让 youtube 自动播放，并播放完整的播放列表。获取 Android 版 Adblock 浏览器，然后访问 youtube 网站，并将其配置为桌面版页面，关闭 Adblock 浏览器，然后重新打开，您将拥有桌面版，自动播放将工作。
使用桌面版也意味着 AdBlock 可以正常工作。移动版本调用独立的 YouTube 播放器，这就是为什么您需要桌面版本的页面，以便自动播放可以工作，广告拦截也可以工作。
【讨论】：
感谢您的评论。这种方式适用于任何 - 我命名的 - 客户用户 - 但不适用于任何“标准”客户。【参考方案6】：如何使用 Youtube 频道直播网址进行嵌入和自动播放。而不是必须不断更新以适应直播变化的视频 ID。
我混合了两组代码，并想出了一个从频道直播中嵌入的自动播放 Youtube 视频。
感谢其他两位贡献者的帮助。希望这对其他人有所帮助。
示例流 https://www.youtube.com/embed/live_stream?channel=UCwobzUc3z-0PrFpoRxNszXQ
Zubi 于 2016 年 11 月 25 日 7:20 回答的以下代码适用于 Youtube 视频。
Darien Chaffart 的代码位于
https://***.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" 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>
【讨论】：
以上是关于Youtube 自动播放无法在具有嵌入式 HTML5 播放器的移动设备上运行的主要内容，如果未能解决你的问题，请参考以下文章
Youtube 嵌入视频：自动播放功能在 iphone 中不起作用
嵌入的 YouTube 视频无法在 iPad (iOS 7) 上播放，而 HTML5 搜索输入可见