H5 video 标签 播放事件 视频加载完成事件 获取视频播放进度时间

html 代码

<video controls="controls" id="video" poster="放图片，为了防止视频没加载完成显示空白"  autoplay="autoplay自动播放">

                       

                         <source src="视频路径" type="video/mp4" id="source"/>

                       

                        Your browser does not support the video tag.

                    </video>

JS代码

     var playimg=document.getElementById("playimg");//一个播放按钮的图片

            var video=document.getElementById("video");//video标签对象

video.currentTime；//获取视频当前播放时间

//如果视频加载完成 播放按钮图片显示，视频图片设置为空，显示视频内容

            video.οncanplay=function(){

             $("#playimg").show();

             $("#video").attr("poster","");

            }

            //视频播放事件，点击播放可以记录学习进度，有获取当前视频播放时间属性

            video.οnplay=function(){

             if($("#is_record").val()==null || $("#is_record").val()==''){

             $.ajax({

     type : "post",

     url : ctx+"/traincourserecord/save.shtml",

     data:{

     con_id : $('.now_play').data("id"),

     course_id : $("#course_id").val()

     },

     success : function(data) {

     if(data.flag){

    

     }else{

     parent.layer.msg("记录学习出现错误");

     }

     },

     error: function(data) {

     parent.layer.msg("记录学习出现错误");

         }

     });

             }

            

             $("#playimg").hide();

            };

            //视频暂停事件

            video.οnpause=function(){

             $("#playimg").show();

            };

            //点击播放图片事件

            playimg.οnclick=function(){

             $("#is_record").val(1);

         if(video.paused){

         $("#playimg").hide();

         video.play();

         $.ajax({

     type : "post",

     url : ctx+"/traincourserecord/save.shtml",

     data:{

     con_id : $('.now_play').data("id"),

     course_id : $("#course_id").val()

     },

     success : function(data) {

     if(data.flag){

    

     }else{

     parent.layer.msg("记录学习出现错误");

     }

     },

     error: function(data) {

     parent.layer.msg("记录学习出现错误");

         }

     });

         }

     };

     //点击视频周围暂停播放图片出现

            video.οnclick=function(){

         if(video.play()){

         $("#playimg").show();

         video.pause();

         }

     };

//切换视频事件，在需要播放的视频上面加上此事件
function play(path,sta){
var video=document.getElementById("video");
$("#source").attr("src",path);
$(".after_login_online .radio_list ul li").eq(sta).addClass("now_play").siblings().removeClass('now_play');
video.load();
$("#playimg").show();
video.play();
}