自定义视频播放demo

最新推荐文章于 2023-08-18 23:14:58 发布

LIU雷

最新推荐文章于 2023-08-18 23:14:58 发布

阅读量143

点赞数

分类专栏： js video

本文链接：https://blog.csdn.net/qq_44988714/article/details/117299409

版权

html javascript jquery

js 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

video

1 篇文章 0 订阅

订阅专栏

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

链接: 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>

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

LIU雷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义视频播放demo

先了解基本属性:菜鸟教程应有尽有链接: https://www.runoob.com/tags/ref-av-dom.html此案例中主要涉及到事件：play() 开始播放时触发pause() 暂停播放时触发ended() 视频播放结束时触发js方法：删除或添加类名toggleClass ：自动判断当前是否含有这个类名有删除没有添加$("#playBtn").toggleClass(“playBtnShow”);动态修改当前标签图片路径var mybtn
复制链接

扫一扫