Question

我正在使用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();

最近我发现了一个错误：Uncaught (in promise) DOMException: The element has no supported sources。

此功能链接 - https://www.chromestatus.com/feature/4765305641369600大约Deprecate MediaStreamTrack.getSources()支持MediaDevices.enumerateDevices()。但是，如果我从控制台运行它，则MediaStreamTrack.getSources为undefined。不确定这是否相关。

在尝试解决这个问题时，我发现了这个实现说明 - https://developers.google.com/web/updates/2016/03/play-returns-promise?hl=en - 其中说明现在video.play()会返回一个承诺：

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中，旧代码可以正常工作。

Answer 1

要获得正确的承诺，您需要等到视频数据加载完毕。所以

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

如何在现代Chrome上访问video.play（）API

1 个答案: