栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

在Safari和Mobile Chrome上以编程方式播放带声音的视频

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

在Safari和Mobile Chrome上以编程方式播放带声音的视频

是的,您可以绑定不是直接在video元素上触发的事件的事件:

btn.onclick = e => vid.play();<button id="btn">play</button><br><video id="vid" src="https://dl.dropboxusercontent.com/s/bch2j17v6ny4ako/movie720p.mp4"></video>

因此,您可以将该按钮替换为要求用户单击的任何其他初始屏幕,然后将被授予播放视频的访问权限。

但是要保持此功能,您必须在 事件处理程序* 本身中至少调用一次视频的

play
方法。 *

无法运作:

btn.onclick = e => {  // won't work, we're not in the event handler anymore  setTimeout(()=> vid.play().catch(console.error), 5000);  }<button id="btn">play</button><br><video id="vid" src="https://dl.dropboxusercontent.com/s/bch2j17v6ny4ako/movie720p.mp4"></video>

正确的解决方法:

btn.onclick = e => {  vid.play().then(()=>vid.pause()); // grants full access to the video  setTimeout(()=> vid.play().catch(console.error), 5000);  }<button id="btn">play</button><br><video id="vid" src="https://dl.dropboxusercontent.com/s/bch2j17v6ny4ako/movie720p.mp4"></video>

附言:这是规范定义的 受信任事件
的列表
,我不确定Safari是否将自身限制为这些事件,也不确定它是否包括所有这些事件。


关于Chrome和准备多个MediaElement的重要说明

Chrome浏览器存在一个[长期存在的错误是由每台主机的最大同时请求数引起的,但确实会影响页面中MediaElement的播放,因此将其数量限制为6个。

这意味着您不能使用上述方法在页面中准备6个以上不同的MediaElement。

但是至少存在两种​​解决方法:

  • 看起来,一旦MediaElement被标记为 用户批准 ,即使您更改其src,它也将保持此状态。因此,您可以准备最多MediaElement,然后在需要时更改其src。
  • 用户手势要求 也涉及Web音频API,一旦允许,它可以播放任意数量的音频源。因此,
    depreAudioData()
    借助该方法,可以将其所有音频资源加载为AudioBuffer,甚至可以从视频媒体加载音频资源,这些图像流可以仅
    <video>
    在与AudioBuffer并行的静音元素中显示。


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/506696.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号