html视频javascript播放方法无法在移动Safari中使用

时间:2015-03-21 00:44:00

标签: javascript ios safari html5-video

我的ember.js应用中有一个视频元素,我在src设置了window.URL.createObjectURL(file)以在上传之前生成预览。从视频文件输入中捕获后,渲染的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();

1 个答案:

答案 0 :(得分:3)

你不能。只有在响应用户操作时才能调用视频播放,就像在点击事件处理程序中一样。这是设计的。

Can you autoplay HTML5 videos on the iPad?