HTML5如何判断网页中视频是否完全加载完毕?

<!-- 视频播放 BEGIN -->
<style type="text/css">
#video1{
position:absolute;
top: 0%;
left: 0%;
z-index: 10000;
width: 100%;
height:100%;
margin-top: 0px;
    background-color: rgba(0,0,0,0.7);
display: none;
}
</style>
<video id="video1" style="object-fit:cover;z-index:10000;" src="http://a.youxianli.cn/video/fugong.mp4"
       preload="auto" webkit-playsinline="true"
       playsinline="true" x5-video-player-type="h5"
       x5-video-player-fullscreen="true">

</video>

<script type="text/javascript">
    var video1 = document.getElementById("video1"), isVideoEnd, isVideoLoad = 0;
    function playVideo() {
        if(!isVideoLoad){
            alert("视频正在加载中,请稍后点击播放");
            return;
        }

        isVideoEnd = 0;
        video1.style.display = 'block';
        video1.currentTime = 0;
        video1.play();
    }
    function stopVideo() {
        video1.style.display = 'none';
        video1.pause();
    }
    //监听视频播放完毕
    video1.addEventListener("ended", function () {
        if (!isVideoEnd) {
            isVideoEnd = 1;
            video1.style.display = 'none';
//            egret.MainContext.instance.stage.dispatchEventWith("finished1", false);
        }
    }, false);
    video1.addEventListener("pause", function () {
        if (!isVideoEnd) {
            isVideoEnd = 1;
            video1.style.display = 'none';
//            egret.MainContext.instance.stage.dispatchEventWith("finished1", false);
        }
    }, false);
    video1.addEventListener('canplaythrough',function(){
        isVideoLoad = 1;
        console.log("视频加载完成");
        console.log("canplaythrough");
    });
</script>
<!-- 视频播放 END -->

发表评论

电子邮件地址不会被公开。