您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

自定义视频播放demo

先了解基本属性:菜鸟教程应有尽有

链接: https://www.runoob.com/tags/ref-av-dom.html

此案例中主要涉及到
事件
play() 开始 播放时触发
pause() 暂停 播放时触发
ended() 视频播放结束时触发
js方法:
删除或添加类名
toggleClass : 自动判断当前 是否含有 这个类名 有删除 没有添加
$("#playBtn").toggleClass(“playBtnShow”);

动态修改当前 标签 图片路径
var mybtn = document.getElementById(“playBtnImg”);
mybtn.src = “./img/pause.png”

直接上代码!!!

下面展示一些 c+v 大法直接可以使用的demo???小的问题还请见谅

// An highlighted block
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频播放demo</title>
    <style>
        .conter_img {
            width: 90%;
            margin: 1.125rem auto;
        }
        
        .conter_img {
            height: 6.25rem;
            height: 11.1875rem;
            padding-bottom: 1.125rem;
            position: relative;
        }
        
        .conter_img img {
            width: 100%;
            height: 100%;
            border-radius: .375rem;
        }
        
        .conter_img video {
            width: 100%;
            height: 100%;
            border-radius: .375rem;
        }
        
        #playBtn {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            display: block;
        }
        
        .playBtnShow {
            display: none !important;
        }
        
        #playBtn img {
            width: 50px;
            height: 50px;
            display: block;
        }
    </style>
</head>

<body>
    <div class="conter_img">
        <!-- 视频   图片还需 换成自己的路径 -->
        <video id="play" src="./img/岱山形象片0720(客户版).mp4"></video>
        <div id="playBtn" class="" onclick="playPause()"><img id="playBtnImg" src="./img/play.png" alt=""></div>
    </div>
    <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
    <script>
        var myVideo = document.getElementById("play");
        var mybtn = document.getElementById("playBtnImg");
        // 点击播放按钮
        function playPause() {
            if (myVideo.paused) {
                myVideo.play();
                mybtn.src = "./img/pause.png"
                console.log("播放状态")
            } else {
                myVideo.pause();
                mybtn.src = "./img/play.png"
                console.log("暂停状态")
            }

        }
        // 点击视频屏幕 控制按钮的现实隐藏
        $(function() {
                $("#play").click(function() {
                    // console.log("*****")
                    $("#playBtn").toggleClass("playBtnShow");
                })
            })
            // 监听视频开始播放 视频开始播放 按钮消失
        document.querySelector('video').onplay = function() {

            // console.log("0001111111")
            $("#playBtn").toggleClass("playBtnShow")

        };
        /*视频结束或错误  切换为播放按钮   图片还需换成自己的路径   */
        $('#play').bind('error ended', function() {
            // alert("播放视频结束");
            mybtn.src = "./img/play.png"
        })
    </script>
</body>

</html>

效果图:
在这里插入图片描述


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进