自定义视频播放器

最新推荐文章于 2023-11-22 18:06:03 发布

Kratial

最新推荐文章于 2023-11-22 18:06:03 发布

阅读量918

点赞数 1

分类专栏： html5 文章标签：音视频前端 javascript

本文链接：https://blog.csdn.net/Kratial/article/details/126145126

版权

html5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.本次实例涉及的相关属性介绍

（1）涉及视频的相关属性介绍

volume： 设置或返回音频/视频的音量(规定音频/视频的当前音量。必须是介于 0.0 与 1.0 之间的数字,默认值：1.0。)
playbackRate: 设置或返回音频/视频播放的速度(示例：1.0 正常速度,0.5 半速（更慢）,2.0 倍速（更快)
duration: 返回当前音频/视频的长度（以秒计）
currentTime: 设置或返回音频/视频中的当前播放位置（以秒计）

（2）涉及视频的相关事件介绍

canplay: 当浏览器可以播放音频/视频时
ended: 当目前的播放列表已结束时
pause： 当音频/视频已暂停时
play： 当音频/视频已开始或不再暂停时
ratechange： 当音频/视频的播放速度已更改时
timeupdate： 当目前的播放位置已更改时
volumechange： 当音量已更改时

详细的媒体类属性和事件学习请参考：https://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

2. 实例如下：

<!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">
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_2996480_byv08gmc40d.css" />
    <link rel="stylesheet" type="text/css" href="./css/index.css" />
    <title>Document</title>
</head>

<body>
    <div class="player">
        <div class="title">视频标题</div>
        <div class="show-ending">播放结束</div>
        <video src="./video/1.mp4" oncanplay=""></video>
        <!-- 操作区域 -->
        <div class="controls-box">
            <div class="v-play iconfont icon-shipinbofang"></div>
            <div class="progress">
                <div class="default-line"></div>
                <div class="real-step"></div>
            </div>
            <!-- 音量控制 -->
            <div class="volumn iconfont icon-shengyin_shiti">
                <div class="line-wrapper">
                    <div class="line"></div>
                    <div class="bar"></div>
                </div>
            </div>
            <!-- 速度的控制 -->
            <div class="rate-wrapper iconfont icon-dangwei">
                <ul class="rate-level-wrapper">
                    <li class="rate-level" id="r-2">2.0倍速</li>
                    <li class="rate-level" id="r-1">1.0倍速</li>
                    <li class="rate-level" id="r-0.5">0.5倍速</li>
                </ul>
            </div>
            <div class="time-show">
                <span class="current-time">00:00:00</span> /
                <span class="total-time">00:00:00</span>
            </div>
            <div class="full-screen iconfont icon-quanping"></div>
        </div>
    </div>
    <script>
        let video = $('video'),
            playBtn = $('.v-play'),
            totalTime = $('.total-time'),
            currentTime = $('.current-time'),
            currentBar = $('.real-step'),
            progress = $('.progress'),
            showEnding = $('.show-ending'),
            player = $('.player'),
            volumn = $('.line-wrapper'),
            volumnBar = $('.bar'),
            volumnBox = $('.volumn')
            rateBox = $('.rate-level-wrapper')
        function $(name) {
            return document.querySelector(name)
        }
        // 过滤时间
        function filterTime(data) {
            if (!data) {
                return '00:00:00'
            }
            data = String(data)
            let hours = String(Math.floor(data / 3600)),
                minutes = String(Math.floor(data % 3600 / 60)),
                seconds = String(Math.floor(data % 3600 % 60))
            return hours.padStart(2, '0') + ':' + minutes.padStart(2, '0') + ':' + seconds.padStart(2, '0')
        }   
        function playVideo(e, hasControls) {
            if (hasControls) {
                if (e.target.className.includes('icon-shipinbofang')) {
                    // 播放
                    e.target.className = e.target.className.replace('icon-shipinbofang', 'icon-shipinzanting')
                    // video.pause()
                } else {
                    // 暂停
                    e.target.className = e.target.className.replace('icon-shipinzanting', 'icon-shipinbofang')
                    video.play()
                }
                return
            }
            if (e.target.className.includes('icon-shipinbofang')) {
                // 播放
                e.target.className = e.target.className.replace('icon-shipinbofang', 'icon-shipinzanting')
                video.play()
            } else {
                // 暂停
                e.target.className = e.target.className.replace('icon-shipinzanting', 'icon-shipinbofang')
                video.pause()
            }
        }
        document.addEventListener('click', function (e) {
            /*
            **
            **
            控制视频的播放与暂停
            **
            **
            ** 
            */
            if (e.target.className.includes('v-play')) {
                playVideo(e)
                return
            }
            /*
             **
             **
             **
             计算当前进度条对应的时间
             处理点击进度条进行快进快退的模块
             **
             **
             **
             */
            if (e.path[0].className.includes('progress') || e.path[1].className.includes('progress')) {
                // 计算当前时间 e.offsetX / progress.offsetWidth * video.duration
                video.currentTime = e.offsetX / progress.offsetWidth * video.duration
                playVideo(e, true)
                return
            }
            /* 
             **
             **
             **
             音量模块的代码
             **
             **
             **
             */
            // 设置视频的音量
            if (e.path[0].className.includes('line-wrapper') || e.path[1].className.includes('line-wrapper')) {
                if (video.volume === 0) {

                    volumnBox.className = volumnBox.className.replace('icon-shengyin_shiti', 'icon-jinyin')
                }
                if (volumnBox.className.includes('icon-jinyin')) {
                    volumnBox.className = volumnBox.className.replace('icon-jinyin', 'icon-shengyin_shiti')
                }
                video.volume = e.offsetY / 100
                volumnBar.style.height = e.offsetY + 'px'
                return
            }
            if (e.target.className.includes('volumn')) {
                volumnBar.style.height = video.volume * 100 + 'px'
                volumn.style.display !== 'block' ? volumn.style.display = 'block' : volumn.style.display = 'none'
                return
            }
            /*
             **
             **
             **
             变更视频的播放速率:
             playbackRate 属性设置或返回音频/视频的当前播放速度
             只有 Google Chrome 和 Safari 支持 playbackRate 属性。
             audio|video.playbackRate=playbackspeed
             注意速率不能设置负值，会报错的
             **
             **
             **
             */
            if (e.target.className.includes('rate-wrapper')) {
                rateBox.style.display = 'block'
                return
            }
            if (e.target.className === 'rate-level') {
                let id = e.target.id.replace('r-', '')
                video.playbackRate = Number(id)
                console.log(video.playbackRate, 'video.playbackRate')
                rateBox.style.display = 'none'
                return
            }
            /*
            * *
            * *
            * *
            处理全屏展示与退出全屏的操作
            **
            **
            */
            if (e.target.className.includes('full-screen')) {
                if (e.target.className.includes('icon-quanping')) {
                    // 全屏
                    e.target.className = e.target.className.replace('icon-quanping', 'icon-quxiaoquanping')
                    player.webkitRequestFullScreen()
                } else {
                    // 退出全屏
                    e.target.className = e.target.className.replace('icon-quxiaoquanping', 'icon-quanping')
                    document.webkitExitFullscreen()
                }
                return
            }
        })
        /*
        **
        **
        当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时)，能够获取到对应的视频总时长
        **
        **
        **
        */
        video.oncanplay = function (e) {
            video.style.display = 'block'
            console.log('当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时)，能够获取到对应的视频总时长')
            totalTime.innerText = filterTime(video.duration)

        }
        /*
        **
        **
        **
        时间每次更新的时候给当前时间模块赋值(ontimeupdate:当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本。)
        **
        **
        **
        */
        video.ontimeupdate = function (e) {
            if (video.currentTime !== video.duration) {
                showEnding.style.display = 'none'
            }
            currentTime.innerText = filterTime(video.currentTime)
            // 进度条长度计算：  video.currentTime/ video.duration 
            currentBar.style.width = (video.currentTime / video.duration) * 100 + '%'
        }

        /* 
        **
        **
        **
        播放结束时需要提示播放结束(onended:当媒介已到达结尾时运行的脚本)
        **
        **
        **
        */
        video.onended = function (e) {
            showEnding.style.display = 'block'
            video.style.display = 'none'
            playBtn.className = playBtn.className.replace('icon-shipinzanting', 'icon-shipinbofang')
        }

        // 每当音量改变时触发onvolumechange事件
        video.onvolumechange = function (e) {
            if (video.volume === 0) {
                volumnBox.className = volumnBox.className.replace('icon-shengyin_shiti', 'icon-jinyin')
            }
        }
    </script>
</body>

</html>