[英]Has anyone met this weird html5 video playback issue? Black element, with no possibility to load
I have a video element: 我有一个视频元素:
<video class="media video" src="http://localhost:3000/uploads/medias/2014/08/11/nahNYjjysJBuwSsxj_2" loop></video>
Using jQuery I move it around the DOM (attaching and detaching it). 使用jQuery我将它移动到DOM(附加和分离它)。
Sometimes after a new attachemnt (using $.appendTo
) the video goes black with no possibility to programatically play it. 有时在一个新的
$.appendTo
(使用$.appendTo
)后,视频变黑,不可能以编程方式播放。 Ie: I can do the following with no success: 即:我可以做到以下但没有成功:
var video = $('video')[0]; // using jQuery I get the reference to the DOM element
video.load(); // nothing happens
video.play(); // nothing happens
video.pause(); // nothing happens
I also have a listener on it 我也有一个听众
$('video').on('canplay', function () {/*...*/});
which never gets triggered. 永远不会被触发。
I've tried changing the url to: 我已经尝试将网址更改为:
v.src = v.src + '?cache_bust=true';
// then
v.load(); v.play();
but nothing happens. 但没有任何反应。
video
elements using $.appendTo
to a visible area and then try to play them $.appendTo
将video
元素附加到可见区域,然后尝试播放它们 Chrome shows pending
and the server never reports an incoming request. Chrome显示
pending
,服务器从不报告传入请求。 ` `
As I've been digging deeper. 因为我一直在深入挖掘。 I've realized this might be a chrome/ium issue.
我意识到这可能是一个chrome / ium问题。 Thus I've found the following pages:
因此我找到了以下页面:
Which all show bugs that have been open for 1.5 - 4 years. 所有这些都显示已经开放1.5 - 4年的错误。 Which does not look too promising.
哪个看起来不太有希望。 Therefore I will dive into searching for alternatives, trying out:
因此,我将潜入寻找替代方案,尝试:
video.src = null; video.load();
video.src = null; video.load();
video.src = null; video.load();
on every video hide byte ranges
byte ranges
In which format are your videos? 您的视频采用哪种格式? Many encoders, including FFmpeg and MEncoder, write the mp4 metadata very unclean.
许多编码器,包括FFmpeg和MEncoder,都非常不清楚地编写mp4元数据。 In most cases the index will be written at the end of the video file and not, as expected at beginning of the file.
在大多数情况下,索引将写在视频文件的末尾,而不是像文件开头所预期的那样。 So the entire video must be downloaded before it can be played.
因此,必须先下载整个视频才能播放。
The correction can be done under Linux with a small but powerful tool called qt-fast start
. 可以在Linux下使用一个名为
qt-fast start
的小而强大的工具进行更正。 This small program is conveniently already by default in the tools subdirectory of the FFmpeg installation included. 默认情况下,这个小程序已经方便地包含在FFmpeg安装的tools子目录中。
If you're indeed using Chrome, this may be related to chrome's behaviour concerning videos, ie using byte serving to get the video stream, then mess up when receiving a 200 HTTP code, and not 206 which suits the byte serving thing better. 如果您确实在使用Chrome,这可能与Chrome的视频行为有关,即使用字节服务获取视频流,然后在接收200 HTTP代码时陷入困境,而不是206更适合字节服务的事情。
The problem seems to happen mainly when replaying the video. 问题似乎主要发生在重播视频时。 You'll find more info in this other thread: HTML5 video will not loop
你会在这个其他主题中找到更多信息: HTML5视频不会循环播放
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.