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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 10:10:42  来源:igfitidea点击:

html video javascript play method not working in mobile Safari

javascriptiossafarihtml5-video

提问by Robert Carter Mills

I have a video element in my ember.js app that I'm setting the srcof 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应用程序的视频元素我设置srcwindow.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.

你不能。只有在响应用户操作(例如在单击事件处理程序中)时,才能调用视频播放。这是设计使然。

Can you autoplay HTML5 videos on the iPad?

您可以在 iPad 上自动播放 HTML5 视频吗?