HTML5:自定义视频控件

最新推荐文章于 2024-05-31 22:20:16 发布

Zayn17

最新推荐文章于 2024-05-31 22:20:16 发布

阅读量1.5k

点赞数 1

分类专栏：前端文章标签： HTML5

本文链接：https://blog.csdn.net/weixin_43867927/article/details/102698833

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

此处出自《JavaScript DOM编程艺术（第二版）》，修改播放按钮

movie.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="video-wrapper">
    <video id="movie" controls>
        <source src="movie.mp4"/>
        <p>Download movie as <a href="movie.mp4">MP4</a></p>
    </video>
</div>
<script src="scripts/player.js"></script>
</body>
</html>

player.js

function createVideoControls() {
    // 找到页面中的video元素，分别应用addControl函数
    var vids = document.getElementsByTagName('video');
    for(var i = 0; i< vids.length; i++){
        addControls(vids[i]);
    }
}

function addControls(vid) {
    // 删除原来的control属性，去掉内置控件
    vid.removeAttribute('controls');

    vid.height = vid.videoHeight;
    vid.width = vid.videoWidth;
    vid.parentElement.style.height = vid.videoHeight + 'px';
    vid.parentNode.style.width = vid.videoWidth + 'px';

    // 创建新控件
    var controls = document.createElement('div');
    controls.setAttribute('class', 'control');
    // 创建播放按钮
    var play = document.createElement('button');
    play.setAttribute('title','Play');
    // '&#X25BA' 播放符号
    play.innerHTML = '&#X25BA';
    // 添加播放按钮
    controls.appendChild(play);

    // 控件加入播放界面
    vid.parentNode.insertBefore(controls, vid);

    // 单击播放影片
    play.onclick = function () {
        if(vid.ended){
            vid.currentTime = 0;
        }
        if(vid.paused){
            vid.play();
        } else{
            vid.pause();
        }
    };

    // 利用play、pause和ended事件来修改Play按钮的状态，并在影片为暂停的情况下显示Pause按钮
    vid.addEventListener('play',function () {
        play.innerHTML = '&#X2590;&#X2590';
        play.setAttribute('paused', true);
    },false);

    vid.addEventListener('pause', function () {
        play.removeAttribute('paused');
        play.innerHTML = '&#X25BA;';
    },false);

    vid.addEventListener('ended',function () {
        vid.pause();
    },false);
}
window.onload = function () {
    createVideoControls();
};

最后效果

未修改添加控件的样式，所以很丑ㄟ( ▔, ▔ )ㄏ
在这里插入图片描述

Zayn17

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML5:自定义视频控件

此处出自《JavaScript DOM编程艺术（第二版）》，修改播放按钮movie.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body&g...
复制链接

扫一扫

专栏目录