欢迎来到[自学php网] ①群 AG亚游集团

AG亚游集团 > 前端 > jquery教程 >

video实现浏览器打开自动播放

来源:未知 ?? 时间:2019-01-03 15:27?作者:小飞侠

[导读] 1.html 2.demo Fake auto play html audio in iOS Safari the right way --------------------- p1.htmlnbsp;/pvideoid=minione-videoclass=minione-videoposter=./common/images/mini-one/miniONE_BG2.jpgautoplay=autoplaymuted=mutedpreload=nbsp;nbsp;nbs...

1.html  

2.demo    

   

   

Fake auto play html audio in iOS Safari the right way - AG亚游集团

   

---------------------

<p>
    1.html

&nbsp;
</p>
<video id="minione-video" class="minione-video" poster="./common/images/mini-one/miniONE_BG2.jpg" autoplay="autoplay" muted="muted" preload="">
    &nbsp; &nbsp; &nbsp; &nbsp;
    <source type="video/mp4" src="/c1aff4mifileaff4cn/f/i/16/chain/airpro/airpro-top.mp4"/>&nbsp; &nbsp; &nbsp; &nbsp; <!--<source type="video/mp4" src="./common/images/mini-one/mini-one-video.mp4">-->
&nbsp; &nbsp; &nbsp; &nbsp; <!--<source type="video/mp4" src="./common/images/mini-one/mini-one-video.Ogg">-->
&nbsp; &nbsp; &nbsp; &nbsp; <img src="./common/images/mini-one/BG2.jpg" alt="one"/>&nbsp; &nbsp; &nbsp;
</video>
<p>
    2.demo

&nbsp; &nbsp;
</p>
<meta charset="UTF-8"/>
<p>
    &nbsp; &nbsp;
</p>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<p>
    &nbsp; &nbsp;
</p>
<title>
    Fake auto play html audio in iOS Safari the right way
</title>
<p>
    &nbsp; &nbsp;
</p><style>        video{
            width: 100%;
        }
   </style>
<video id="bgmusic" autoplay="" preload="" muted="">
    &nbsp; &nbsp;
    <source type="video/mp4" src="/c1aff4mifileaff4cn/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 = '/c1aff4mifileaff4cn/f/i/16/chain/airpro/airpro-top.mp4';
    })();</script>
<p>
    ---------------------


最新文章

点击排行

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号@版权所有AG亚游集团

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

上港新赛季未提出明确成绩目标 要维护好球队形象 叙政府军喷火坦克亮相:7.5秒抹掉一个小规模战斗群 詹皇32分打满下半场 骑士拒绝逆转2-2进天王山 黑客入侵快递后台盗近亿客户信息 老人资料1条1元 2018羽毛球世锦赛混双签表 黄鸭组合战日本强敌 中国欧盟商会主席:中国近18个月改革步伐大大提速 耀才证券:关税计划成后市关键 港股上落市格局未变 美军飞行员遇UFO视频曝光:不知所措大喊“天呐” 对文在寅不信任?美四星上将“当大使”震动韩国 人民日报评美退出伊核协议:无视国际责任轻率之举 人民日报海外版:经贸合作是中美关系压舱石 张庆鹏因私事暂未归队 仍与山东队有合同关系
副军级大校鲍泽敏已担任北京卫戍区副政委 厄齐尔引球迷不满:谎称卧床休息却携伴侣出国 全国人大代表刘小兵:呼吁尽快制定财政法 英联邦-麦克沃伊100自主场惨败 霍顿接力再摘金 侥幸!火箭指挥官逃过一劫 怒骂裁判婊子没被罚 鲁能仅2次射正全转化成进球 踢的不好但命太硬 谷歌高管:人工智能和安全是我们优先发展目标 党报批干部规划升迁路线:精致的自我设计要不得 新中国刑法学创始人之一朱华荣病逝 曾为江青辩护 传高通前董事长雅各布斯或被驱逐出董事会 全国政协委员建言增强移动支付“中国标准”话语权 报告:阿里巴巴百度等中国科技公司存在性别歧视现象
中国的腾讯和阿里等投资巨鳄 会是精明的买家吗? 媒体评川航事件:赞美英雄的同时不能忽视航空安全 英国男子淘到500年不遇金块 但或被皇家“收走” 国家海洋督察组:福建近岸海域污染防治推进不力 日媒称日本拟加强与菲越马三国防卫合作 为制衡中国 30度温差让深足首个客场面临考验 普雷:带三分回家 隔夜要闻:3M等重挫拖累道指下挫420点 金价收高0.… 美女15元揽大乐透2400万:一时不买浑身不自在 屡发不当言论 麻生太郎被自民党内批评“拖后腿” 女生最值得学的手艺 我出钱谁愿意为我卖命 拿回家做的手工活大批 如何利用微信挣钱 AG亚游集团