html5 – 如何在现代Chrome上访问video.play()API

2019年7月20日 350次阅读

我正在使用
HTML5视频标记API来播放网络摄像头中的视频,如下所示：

videoElement = element.find('video')[0];
navigator.getUserMedia(constraints, function(stream) {
 if (navigator.mediaDevices.getUserMedia) {
  videoElement.mozSrcObject = stream;
 } else {
  var vendorURL = window.URL || window.webkitURL;
  videoElement.src = window.URL.createObjectURL(stream);
 }
videoElement.play();

最近我开始有一个错误：未捕获(在promise中)DOMException：该元素没有支持的源.

还有这个功能链接 – https://www.chromestatus.com/feature/4765305641369600是关于Deprecate MediaStreamTrack.getSources()的,有利于MediaDevices.enumerateDevices().但是,如果我从控制台运行它,则MediaStreamTrack.getSources是未定义的.不确定这是否相关.

在尝试解决这个问题时,我发现了这个实现描述 – https://developers.google.com/web/updates/2016/03/play-returns-promise?hl=en – 它声明现在video.play()返回一个Promise：

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

// In browsers that don’t yet support this functionality,
// playPromise won’t be defined.
if (playPromise !== undefined) {
  playPromise.then(function() {
    // Automatic playback started!
  }).catch(function(error) {
    // Automatic playback failed.
    // Show a UI element to let the user manually start playback.
  });
}

测试此代码始终属于catch部分 – 自动播放失败.

然而,这个演示对我来说很好 – https://googlechrome.github.io/samples/play-return-promise/但它是一个< audio>标签.

我使用的是Chrome v.53.在当前的Firefox中,旧代码工作正常.

最佳答案 要获得正确的承诺,您需要等到视频数据加载完毕.所以

video.addEventListener('loadeddata', function() {
    playPromise = video.play();
});
video.load();
点赞