zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    poj3475
    poj2665
    poj2583
    poj2656
    【API进阶之路】破圈,用一个API代替10人内容团队
    除了方文山,用TA你也能帮周杰伦写歌词了
    敏捷转型谁先动:老总,项目经理or团队
    实战案例丨使用云连接CC和数据复制服务DRS实现跨区域RDS迁移和数据同步
    9块钱,构建个私有网盘,关键不限速
    终端传感了解吗?18个知识点为你扫盲
  • 原文地址:https://www.cnblogs.com/2019gdiceboy/p/11605580.html
Copyright © 2011-2022 走看看