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();
}
————————————————
版權聲明:本文為CSDN博主「奮斗的怪怪程序猿」的原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/lg12lp12/article/details/78748564


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM