仅在缓冲完整视频后才开始播放 HTML5 视频

Posted 2023-05-07

【中文标题】仅在缓冲完整视频后才开始播放 HTML5 视频

【英文标题】：Start playing HTML5 Video only after the complete video is buffered

【发布时间】：2016-01-28 20:40:39

【问题描述】：

只有在缓冲整个视频 (100%) 后，我才能开始播放我的 html5 MP4 视频。当它处于缓冲过程中时，我应该显示加载屏幕。请帮忙。此代码应该在 Firefox 和 IE11 中都可以使用。

超链接标题示例： - 播放视频 1：最喜欢的食物 - 播放视频 1：最喜欢的蔬菜 - 播放视频 2：最喜欢的动物

这是我点击超链接和视频标签时的代码。我从数据库中动态加载视频。 'pos' 属性以秒为单位表示玩家必须寻找播放的时间。

<video id="VideoContainer" controls="controls" style="width:500px;height:320px" preload="auto">
<source id="VideoData" src=@Model.IntroVideoPath type="video/mp4" />
Your browser does not support the video tag.

<a onclick="navVideo('@items.FileName','@items.StartSec');">@items.DisplayText</a>

 function navVideo(fileName, pos) 
    //Get Player and the source
    var player = document.getElementById('VideoContainer');
    var mp4Vid = document.getElementById('VideoData');
    var mp4CurVid = $(mp4Vid).attr('src');

    //Reload the player only if the file name changes
    if (mp4CurVid != fileName)             
        $(mp4Vid).attr('src', fileName);
        player.load();

        player.play();
        if (pos != 0) 
            setTimeout(function () 
                player.currentTime = pos;
                player.play();
            , 1000);
        
    
    else 
        player.pause();
        player.currentTime = pos;
        player.play();
    

【问题讨论】：

HTML5 video buffering before the playback的可能重复

【参考方案1】：

问题在于该 MP4 文件的编码技术。我使用不同的设置（Mp4 的随机设置选项）进行编码，最后让它在没有缓冲区的情况下工作。

【参考方案2】：

您可以使用这个http://videojs.com/ 来让它工作。