当我在我的网站上将Youtube视频(IFrame API)的autoplay设置为true时,它无法正常工作。所有的文档都说,出于带宽原因,苹果禁用了ios上的autoplay。
然而,在iPad上,在youtube.com上观看视频时,我发现视频会自动播放(无需点击视频元素)。 Youtube是如何实现的?很难想象苹果仅仅为了YouTube而做了一些特别的事情。
当我在我的网站上将Youtube视频(IFrame API)的autoplay设置为true时,它无法正常工作。所有的文档都说,出于带宽原因,苹果禁用了ios上的autoplay。
然而,在iPad上,在youtube.com上观看视频时,我发现视频会自动播放(无需点击视频元素)。 Youtube是如何实现的?很难想象苹果仅仅为了YouTube而做了一些特别的事情。
你可以使用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>
我遇到了类似但更复杂的问题/需求。
我需要在模态弹出窗口中显示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并调用播放器的播放功能,或者在页面加载后直接点击该元素。