video实现浏览器打开自动播放_web_cgh的博客-程序员秘密

1.html

</video>

2.demo

<!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 audio in iOS Safari the right way</title>
<style>
video{
width: 100%;
}
</style>
</head>
<body>
<video id="bgmusic" autoplay preload muted>
<source type="video/mp4" src="http://c1.mifile.cn/f/i/16/chain/airpro/airpro-top.mp4">
</video>
<script>
(function() {
function log(info) {
console.log(info);
// alert(info);
}
function forceSafariPlayAudio() {
audioEl.load(); // iOS 9 还需要额外的 load 一下, 否则直接 play 无效
audioEl.play(); // iOS 7/8 仅需要 play 一下
}

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

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

// 由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio,
// 因此我们通过一个用户交互事件来主动 play 一下 audio.
window.addEventListener('ready', forceSafariPlayAudio, false);
// audioEl.src = 'http://c1.mifile.cn/f/i/16/chain/airpro/airpro-top.mp4';
})();
</script>
</body>
</html>

本文链接：https://blog.csdn.net/web_cgh/article/details/81015537

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

python 7 -- 彩蛋：python头文件 -- 特殊的注释行（#!/usr/bin/env python和# -- coding: utf-8 --）_Lapland Stark的博客-程序员秘密

#!/usr/bin/env python是用来说明脚本语言是 python 的是要用 /usr/bin下面的程序（工具）python，这个解释器，来解释 python 脚本，来运行 python 脚本的但是，事实上可以用预先配置来解决这个问题...

如何在Altium Designer中实现两片DDR等长走线_a16839678的博客-程序员秘密

如图所示，以ARM，DSP等SOC为核心的电子系统中，经常存在两片或者以上的DDR/DDRII SDRAM。考虑到DDR/DDRII SDRAM的运行频率一般都比较高，在做PCB layout的时候需要等长布线来保证DDR/DDRII SDRAM的读写时序。对于包含两片及以上DDR/DDRII SDRAM的系统，这里要求的等长布线有两层含义。拿ADDRESS信号来讲，第一层含义要求从SOC的某一个

[转]Android-x86 4.4 RC1 发布_weixin_34162401的博客-程序员秘密

转自开源中国http://www.oschina.net/news/48904/android-x86-4-4-rc1?from=20140216#comments Android-x86 4.4 RC1 发布了，下载地址：android-x86-4.4-RC1.iso (294MB).该版本基于 Android 4.4.2，发行说明：http://www.android-x...

K8S 使用NFS 创建PV和PVC的例子学习From https://blog.csdn.net/xts_huangxin/article/details/51494472..._weixin_30649641的博客-程序员秘密

1. 获取资料网址:https://blog.csdn.net/xts_huangxin/article/details/51494472 感谢原作者这里面按照自己的机器情况进行了学习模仿并且mark一下.2. 下载yaml 文件:https://github.com/FlyingShit-XinHuang/my-doc/blob/master/k8s/pv%26pvc/n...

WEB版一次选择多个文件进行批量上传(swfupload)的解决方案_页面选择多文件同时上场_kkwant的博客-程序员秘密

说明：功能完全支持ie和firefox浏览器！一般的WEB方式文件上传只能使用FileUpload控件进行一个文件一个文件的进行上传，就算是批量上传，也要把文件一个一个的添加到页面，无法如

读《马云创造：颠覆传统的草根创业者传奇》永不消逝的激情！_raying的博客-程序员秘密

“ 也许人们都看到了马云的成功，但并不一定都知道他们是怎么成功的，他的成功又给我们多少启示。因为在马云创业的7年中，人们看到的马云都是隐藏在马云制造的媒体背影中的：人们仅仅看到的是一个说大话的马云、一个会忽悠人的马云，而没有真正认识马云的商业智慧。 ” 马云在互联网中的商业智慧就如同浙江那些传统的生意人一般，你永远琢磨不透，却对你充满着吸引力，即使你非常非常不喜欢他