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

我正在使用

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是未定义的.不确定这是否相关.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部分 – 自动播放失败.

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

最佳答案 要获得正确的承诺,您需要等到视频数据加载完毕.所以video.addEventListener('loadeddata', function() {

playPromise = video.play();

});

video.load();