怎么判断视频是否全下加载完成？

Question

怎么判断视频是否全下加载完成？网页有三个比较大的视频，每次刷新会导致非常卡顿，有什么办法可以解决吗？百度搜了好久也没有找到合适的解决办法，求大神给个思路，谢谢！

               <div class="row m5-video">
                    <div class="col-xs-12 col-sm-12 col-md-12">
                        <p class="anviz-sub-title anviz-content-center">M5 安装视频</p>
                        <div class="anviz-content anviz-content-center anviz-video-warning">请在wifi环境下观看此视频<span class="anviz-m5-video-size">  142.1M</span></div>
                        <video id="m5Warning" class="video-js" poster="img/video_bg/2.png" preload controls autobuffer style="width: 100%;height: auto;">
                            <source src="video/m5.mp4" type="video/mp4"></source>
                            <object data="video/m5.mp4" width="100%" height="auto">
                                <embed src="video/m5.mp4" width="100%" height="auto"></embed>
                              </object>
                        </video>
                    </div>
                </div>

这是我放在html中的视频。

Answer 1

var vedioElem = document.getElementById('m5Warning');
videoElem.addEventListener('canplaythrough',function(){});