OGeek|极客世界-中国程序员成长平台

标题: javascript - 测试浏览器是否支持非静音播放视频 [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-11 19:39
标题: javascript - 测试浏览器是否支持非静音播放视频

如何测试视频是否在不被静音的情况下内联播放？

我自己尝试过创建一小段自动播放小视频 (20kb) 的脚本。根据视频是否“正在播放”返回一个 bool 值。

它似乎正在工作。在 iOS 上，它返回 false。在桌面上它返回 true。

但是，我想获得第二个意见，这是否是运行测试的正确方法。

JS:

var $video = $('video');

$video.on( 'loadstart', function(){
  setTimeout(function(){
    alert( isUnmutedInlineSupported() ? 'supported' : 'unsupported' );
  }, 500);
});

function isUnmutedInlineSupported(){
  if( !$video[0].paused && $video[0].currentTime > 0 ) {
    //playsinline unmuted supported
    return true;
  } else {
    //playsinline unmuted unsupported
    return false;
  }
}

HTML:

<video playsinline loop autoplay poster="https://placehold.it/1600x900">
  <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/214327/html5-video-sound-test.mp4" type="video/mp4" />
</video>

https://codepen.io/hassforshort/pen/baXrXo

---

Best Answer-推荐答案

这是检查视频是否已开始播放的最佳方式。由 webkit 推荐 https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/

var promise = document.querySelector('video').play();

if (promise !== undefined) {
    promise.catch(error => {
        // Auto-play was prevented
        // Show a Play Button to let the user manually start playback
    }).then(() => {
        // Auto-play started
    });
}

关于javascript - 测试浏览器是否支持非静音播放视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48465395/

---

欢迎光临 OGeek|极客世界-中国程序员成长平台 (http://ogeek.cn/)

Powered by Discuz! X3.4