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

Question

有没有一种方法可以在整个视频缓冲（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(); 
    } 

Answer 1

你可以使用这个http://videojs.com/得到那个工作。

Answer 2

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