Javascript 只有在缓冲完整视频后才能开始播放HTML5视频

有没有一种方法，我可以开始播放我的HTML5 MP4视频后，整个视频缓冲（100%）。当它在缓冲过程中，我应该显示加载屏幕。请帮忙。这段代码应该可以在Firefox和IE11中使用

超链接标题示例： -播放视频1:Fav食品-播放视频1:Fav蔬菜-播放视频2:Fav动物

这是我点击超链接和视频标签时的代码。我从数据库动态加载视频。属性“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.

您的浏览器不支持视频标记。

@items.DisplayText
功能导航视频（文件名，位置）{
//获取玩家和来源
var player=document.getElementById（'VideoContainer'）；
var mp4Vid=document.getElementById（'VideoData'）；
var mp4CurVid=$（mp4Vid）.attr（'src'）；
//仅当文件名更改时重新加载播放机
如果（mp4CurVid！=文件名）{
$（mp4Vid.attr（'src'，文件名）；
player.load（）；
player.play（）；
如果（位置！=0）{
setTimeout（函数（）{
player.currentTime=pos；
player.play（）；
}, 1000);
}
}
否则{
player.pause（）；
player.currentTime=pos；
player.play（）；
}

您可以使用this使其工作。

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

可能存在重复的

<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();
    }