在 iOS Safari中假装自动播放 HTML5

最新推荐文章于 2022-02-18 16:13:41 发布

Bearbearcat

最新推荐文章于 2022-02-18 16:13:41 发布

阅读量511

点赞数

分类专栏： js h5

本文链接：https://blog.csdn.net/qq_41555732/article/details/100880690

版权

js 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>Fake auto play html video in iOS Safari the right way</title>
	</head>
	<body>
		<h1>在 iOS Safari 中假装自动播放 HTML5</h1>
		<p>核心原理: 通过一个用户交互事件来主动 play 一下</p>
		<br>
		<br>
		<br>
		<video id="bgmusic" autoplay preload webkit-playsinline="true"playsinline="true" controls width='400' height = '400'></video>
		<script>
			(function() {
				function log(info) {
					console.log(info);
					// alert(info);
				}

				function forceSafariPlayVideo() {
					videoEl.load(); // iOS 9   还需要额外的 load 一下, 否则直接 play 无效
					videoEl.play(); // iOS 7/8 仅需要 play 一下
				}

				var videoEl = document.getElementById('bgmusic');

				// 可以自动播放时正确的事件顺序是
				// loadstart
				// loadedmetadata
				// loadeddata
				// canplay
				// play
				// playing
				// 
				// 不能自动播放时触发的事件是
				// iPhone5  iOS 7.0.6 loadstart
				// iPhone6s iOS 9.1   loadstart -> loadedmetadata -> loadeddata -> canplay
				videoEl.addEventListener('loadstart', function() {
					log('loadstart');
				}, false);
				videoEl.addEventListener('loadeddata', function() {
					log('loadeddata');
				}, false);
				videoEl.addEventListener('loadedmetadata', function() {
					log('loadedmetadata');
				}, false);
				videoEl.addEventListener('canplay', function() {
					log('canplay');
				}, false);
				videoEl.addEventListener('play', function() {
					log('play');
					// 当 audio 能够播放后, 移除这个事件
					window.removeEventListener('touchstart', forceSafariPlayVideo, false);
				}, false);
				videoEl.addEventListener('playing', function() {
					log('playing');
				}, false);
				videoEl.addEventListener('pause', function() {
					log('pause');
				}, false);

				// 由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio,
				// 因此我们通过一个用户交互事件来主动 play 一下 audio.
				window.addEventListener('touchstart', forceSafariPlayVideo, false);

				videoEl.src = 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4';
			})();
		</script>
	</body>
</html>

Bearbearcat

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在 iOS Safari中假装自动播放 HTML5

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0...
复制链接

扫一扫