移动版Safari中HTML视频JavaScript播放方法不起作用

Question

我在我的 Ember.js 应用程序中有一个视频元素，我正在使用 window.URL.createObjectURL(file) 设置它的 src 以生成上传前的预览。从视频文件输入捕获后，渲染的 HTML 如下：

<video class="video-review" controls="1" autoplay="1"
  src="blob:http://66efcd0.ngrok.com/bb427ce0-af04-4763-bb59-3be85b936895">
</video>
// * ngrok is just a port forwarding util for testing

视频显示正常，如果我手动点击它，它也能正常播放。

我需要视频在加载完成后立即播放。问题是自动播放不起作用，我无法通过javascript播放视频。在控制台（在视频加载后vid.load()），我尝试了以下内容：

vid = $('video.video-review').get(0)
vid.play()

这段代码不起作用。但是，当我手动点击视频并播放它（并使其聚焦），然后从控制台调用vid.play（）时，就可以正常播放视频。因此，我尝试将视频聚焦：

vid.focus() and jquery $(vid).focus()
vid.play()

运气不好。

如何在移动Safari中使用JavaScript播放HTML视频？为什么自动播放不起作用？

此外，以下是分配视频属性的代码（由文件更改事件上的观察者触发）：

var file = this.get('file');
window.URL = window.URL || window.webkitURL;
var vid = this.$('.video-review').get(0);
vid.src = window.URL.createObjectURL(file);   
vid.file = file;
vid.addEventListener('canplaythrough', function() {
  this.play();
}, false);
vid.load();

- Robert Carter Mills

Answer 1

您无法这样做。仅当它是响应用户操作（如单击事件处理程序）时，调用视频的播放才起作用。这是有意设计的。 您能在iPad上自动播放HTML5视频吗？

- aldel