html 视频 javascript 播放方法在移动 Safari 中不起作用
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/29177958/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html video javascript play method not working in mobile Safari
提问by Robert Carter Mills
I have a video element in my ember.js app that I'm setting the src
of with window.URL.createObjectURL(file)
to generate a preview before uploading. After capturing from a video file input, the rendered html looks like this:
我在我的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
The video shows up fine, and plays fine if I manually tap on it.
视频显示正常,如果我手动点击它,它也能正常播放。
I need the video to play immediately after it has loaded. The problem is that autoplay does not work, and I can not get the video to play from javascript.In the console (after video has loaded vid.load()
) I tried:
我需要视频在加载后立即播放。问题是自动播放不起作用,我无法从 javascript 播放视频。在控制台中(加载视频后vid.load()
)我试过:
vid = $('video.video-review').get(0)
vid.play()
This does not work. However, if I manually tap on the video and play it, (and give it focus) then calling vid.play()
from the console DOES work and plays the video fine. So I tried giving the video focus:
这不起作用。但是,如果我手动点击视频并播放它(并给它焦点),那么vid.play()
从控制台调用确实可以正常播放视频。所以我试着给视频焦点:
vid.focus() and jquery $(vid).focus()
vid.play()
No luck.
没有运气。
How can I get an HTML video to play with javascript in mobile Safari?? - and why is autoplay not working?
如何在移动 Safari 中使用 javascript 播放 HTML 视频?- 为什么自动播放不起作用?
Also here is the code that assigns the video attributes (triggered by an observer on the file change event):
这里也是分配视频属性的代码(由文件更改事件的观察者触发):
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();
采纳答案by aldel
You can't. Calling play on the video only works if it's in response to a user action, like in a click event handler. This is by design.
你不能。只有在响应用户操作(例如在单击事件处理程序中)时,才能调用视频播放。这是设计使然。