Question

我在我的主页上播放了一段视频。我的HTML看起来像这样：

<video id="player" style="display: inline;">
   <source id="src1" type="video/webm" src="uploads/tx_frmovieportfolio/film_05.webm">
   <source id="src2" type="video/ogg" src="uploads/tx_frmovieportfolio/film_05.ogv">
   <source id="src3" type="video/mp4" src="uploads/tx_frmovieportfolio/film_05.mp4">
   Your Browser does not support HTML5 video.
</video>

我通过点击链接通过jQuery更改源。我也构建了自己的控制栏。一切都与它有关。但是：

在Chrome中，视频加载速度非常快，播放效果也不错。在Firefox 24和Opera 12.16中，视频加载速度很慢，并且一直处于停顿状态。我认为它正在加载新的帧。它需要很多时间。我尝试使用autobuffer和preload =“true”，即使第二个已经过时了。但它没有改变任何东西。

是否有任何解决方法，我能做些什么来让它在所有实际浏览器中快速运行？否则使用视频标签是没有意义的。

获得一些想法或者可能是一个完美的解决方案会很棒。 :)。

福克

Answer 1

在您提出问题七年后，我遇到了同样的问题。当前的问题是您的浏览器正在尝试缓冲非常大的视频文件，并且某些浏览器比其他浏览器处理得更好。最重要的是，您无法控制他们的互联网连接速度和可用内存。

解决方案是将视频转换为Apple's HTTP Live Streaming (HLS)格式。从2020年开始，它就是most widely supported format，它的工作原理是将视频分割为简短的H.264 / H.265编码剪辑，每个剪辑的持续时间仅为几秒钟，并存储为单独的文件。生成清单（.m3u8），该清单用作视频播放器读取的索引，以仅下载所需的分段。

以下是如何使用FFMPEG将MPEG2视频转码为HLS VOD格式的示例：

ffmpeg -i InputVideo.mpg -vf scale=w=352:h=240:force_original_aspect_ratio=decrease -c:a aac -ar 44100 -b:a 64k -c:v h264 -profile:v main -crf 20 -g 48 -keyint_min 48 -sc_threshold 0 -b:v 700k -maxrate 900k -bufsize 1400k -hls_time 4 -hls_playlist_type vod -hls_segment_filename hls/%03d.ts hls/OutputVideo.m3u8

Chrome Android> v70，Android Browser和Safari> = 6都对HLS的原始浏览器支持越来越好，所有这些均原生支持HLS。通过代替使用JWPlayer或Video.js代替HTML5视频对象，可以实现近乎通用的兼容性。

HTML5视频口吃/不流畅/缓冲和预加载

1 个答案: