javascript - YouTube 视频自动播放无法在 iPhone 设备的 Chrome 上运行

Question

if($('.explore-video-btn').length > 0) {
		var video_id = youtube_parser($('.explore-video-btn').attr('data-video-url'));
	}
	
	var tag = document.createElement('script');
	tag.src = "https://www.youtube.com/iframe_api";
	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

	//Holds a reference to the YouTube player
	

	//this function is called by the API
	if(document.getElementsByClassName('explore-video-btn').length !== 0) {
		document.getElementsByClassName('explore-video-btn')[0].addEventListener('click', function() {
			onYouTubePlayerAPIReady();
		});
	}

	var player;
	function onYouTubePlayerAPIReady() {
	
		setTimeout(function() {
		
			player = new YT.Player('youtube-iframe', {
				videoId: video_id,
				playerVars: {'rel': 0, 'showinfo': 0, 'ecver': 2, 'autoplay': 1},
				events: {
					'onReady': onPlayerReady,
					'onStateChange': onPlayerStateChange
				}
			});
			//subscribe to events
			
		}, 200);
	}
	
	function onPlayerReady(event) {
		event.target.mute();
		event.target.playVideo();
	}

	function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED) {
			event.target.stopVideo();
		}
	}
	

我使用youtube API来自动播放视频，它在android设备上的chrome浏览器中正常工作，但在iphone设备上的chrome浏览器中无法自动播放。我发现了 YouTube API 文档警告，例如“警告:为了防止用户通过蜂窝网络进行未经请求的下载，嵌入式媒体无法在 iOS 上的 Safari 中自动播放 - 用户始终会启动播放。” .

警告说自动播放在 ios 中的 safari 上不起作用，但没有提到 ios 中的 chrome。请帮助我找到解决方案。谢谢。

Answer 1

因为这不是浏览器问题。这是关于 iOS 的。

视频政策 从 iOS 开始。

<video autoplay> elements will now honor the autoplay attribute, for elements which meet the following conditions:
<video> elements will be allowed to autoplay without a user gesture if their source media contains no audio tracks.
<video muted> elements will also be allowed to autoplay without a user gesture.
If a <video> element gains an audio track or becomes un-muted without a user gesture, playback will pause.
<video autoplay> elements will only begin playing when visible on-screen such as when they are scrolled into the viewport, made visible through CSS, and inserted into the DOM.
<video autoplay> elements will pause if they become non-visible, such as by being scrolled out of the viewport.

See a full list about these restrictions on official site.

不，你不能通过 IFrame api:

Mobile Considerations Autoplay and Scripted Playback The HTML5 element, in certain mobile browsers (such as Chrome and Safari), only allows playback to take place if it's initiated by a user interaction (such as tapping on the player). Here's an excerpt from Apple's documentation:

"Warning: To prevent unsolicited downloads over cellular networks at the user’s expense, embedded media cannot be played automatically in Safari on iOS — the user always initiates playback."

Due to this restriction, functions and parameters such as autoplay, playVideo(), loadVideoById() won't work in all mobile environments.

From YouTube IFrame Player API official document

结论 -> 不，你不能