当我将网站上的 YouTube 视频 (IFrame API) 的自动播放设置为 true 时，它不起作用。所有文档都说苹果出于带宽原因禁用了 ios 上的自动播放。
但是，我在 iPad 上的 youtube.com 上看到视频会自动播放（无需点击视频元素）。 YouTube 是如何让它发挥作用的？很难想象 Apple 会为 YouTube 做一些特别的事情。
【问题讨论】：
标签： ios ipad youtube youtube-api
我偶然发现了类似但更复杂的问题/要求。
我需要在模态弹出窗口中显示 YouTube 视频。单击即可显示弹出窗口。 已获取 YouTube API 代码（来自 https://developers.google.com/youtube/iframe_api_reference）并进行了一些修改以使用 Bootstrap 弹出窗口。
下面是我的代码
<div class="modal" id="videoModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="videoWrapper">
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"> </div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
// 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: '360',
width: '640',
videoId: 'YOUR VIDEO ID',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
//event.target.playVideo();// Nullifying the action otherwise the video will play as soon as page loads
}
// 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();
}
function ShowPopup() {
$('#videoModal').modal('show');
player.playVideo();
}
//Stop video when bootstrap popup is closed
$("#videoModal").on('hide.bs.modal', function () {
player.stopVideo();
});
</script>
【讨论】：
你可以用 javascript 来做。
这是一个例子：
<div class="video-container">
<div id="player"> </div> <!--<iframe width="960" height="720" src="//www.youtube.com/embed/5YptIh_avrM?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>-->
</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: '720',
width: '960',
videoId: 'YOUR_ID_HERE',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
event.target.setVolume(20);
}
// 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) {
}
function stopVideo() {
player.stopVideo();
}
</script>
【讨论】：
我没有对此进行测试，但是您可以使用 Javascript 并为播放器调用播放函数，甚至在页面加载后单击元素。
【讨论】：
似乎 Youtube 的团队使用了用户在点击/单击视频按钮时的交互来授权复制。
请记住，youtube.com 是一个 SPA（单页应用程序），因此没有页面重新加载或重定向。
所以，youtube.com 没有启用自动播放。
【讨论】：
这是不可能的。由于各种原因（包括但不限于数据使用），Apple 不允许自动播放视频。
请参考：
Youtube embedded video: autoplay feature not working in iphone
【讨论】：