HTML5立即播放下一个视频

时间:2015-06-17 09:10:37

标签: javascript html5 video

所以我试图在不使用MediaSource扩展的情况下分段传输视频。 (因为并非所有浏览器都支持MSE)。现在我想通过加载两个视频元素并在正确的时刻播放下一个视频元素来做到这一点。但这在切换之间有一个非常小的延迟。我试着继续检查视频的当前时间,并在一小部分后播放下一个视频元素。但这并没有那么好(音频重叠或延迟)

请注意,视频是从Blob存储中预加载和加载的。所以加载不应该延迟播放。

如何在不使用MediaSource扩展的情况下顺利播放(或没有闪存的其他解决方案)?

1 个答案:

答案 0 :(得分:0)

Your best bet is to use two video elements positioned one on top of the other. The first one should be playing the current part (or chunk) of the video. The second video element should be loaded with the blob that contains the next chunk and be paused. It should also be hidden (you can set display:'none' or z-index:-99999). And then when the first video element ends (the end event is dispatched), call the play() method of the second video element, show it, and hide the first one. Rinse and repeat.

This is what the LifemirrorPlayer does.

If the chunks of the stream are perfectly encoded and cut then this technique works. Often it doesn't. Common problems are:

  • Synchronizing the audio stream is the probably the hardest. After twenty or thirty chunks are played, the audio usually loses sync with the video. This is very annoying for the viewer and hard to detect and fix (i don't know of any solution actually).

  • The video element doesn't end. This is usually caused by an encoder that has put too much (or too little) content into a chunk. It can also be caused by improperly cut chunks, by a buggy encoder or decoder.

  • Flickering when the two video elements are swapped. This depends on the browser. However most browsers deal very well with this and the swap is quick and smooth.