《JavaScript DOM编程艺术》HTML5新特性之video

最新推荐文章于 2019-11-14 09:40:40 发布

iofe

最新推荐文章于 2019-11-14 09:40:40 发布

阅读量260

点赞数 1

分类专栏： JavaScript DOM 编程艺术总结

本文链接：https://blog.csdn.net/qq_22713749/article/details/79281772

版权

JavaScript DOM 编程艺术总结专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1 html页面

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>movie</title>
    <link rel="stylesheet" type="text/css" href="play.css">
</head>
<body>
<div class="video-wrapper">
    <video id="movie" controls>
        <source src="movie.mp4"/>
        <source src="movie.ogg" type='video/ogg; codecs="theora,vorbis"'/>
        <p>download movie as
            <a href="movie.mp4">mp4</a>,
            or<a href="movie.ogg">ogg</a>
        </p>
    </video>
</div>
<script src="play.js"></script>
</body>
</html>

2 js代码

首先找到页面的video元素，对其分别应用addControls函数

在addControls函数中，删除了video元素原来的Controls属性去掉其内置的空间，添加了几个DOM对象充当play/pause按钮，并把他们添加到video元素的子元素。

play按钮添加一个click事件，以便单击它播放影片：

利用play、pause和ended事件来修改play按钮的状态，并在影片未暂停情况下显示pause按钮。

function createVideoControls(){
    var vids=document.getElementsByTagName('video');
    for(var i=0;i<vids.length;i++){
        addControls(vids[i]);
    }
}

function addControls(vid){
    vid.removeAttribute('controls');
    vid.height=vid.videoHeight;
    vid.width=vid.videoWidth;
    vid.parentNode.style.height=vid.videoHeight+'px';
    vid.parentNode.style.width=vid.videoWidth+'px';

    var controls=document.createElement('div');
    controls.setAttribute('class','controls');

    var play=document.createElement('button');
    play.setAttribute('title','play');
    play.innerHTML='►';

    controls.appendChild(play);
    vid.parentNode.insertBefore(controls,vid);
    play.οnclick=function(){
        if(vid.ended){
            vid.currentTime=0;
        }
        if(vid.paused){
            vid.play();
        }else{
            vid.pause();
        }
    };
    vid.addEventListener('play',function(){
        play.innerHTML='▐▐';
        play.setAttribute('paused',true);
    },false);

    vid.addEventListener('pause',function(){
        play.setAttribute('paused');
        play.innerHTML='►';
    },false);

    vid.addEventListener('ended',function(){
        vid.pause();
    },false);
}

window.οnlοad=function(){
    createVideoControls();
}

3 css

.video-wrapper{
    overflow:hidden;
}

.video-wrappper .controls{
    position: absolute;
    height: 30px;
    width: 30px;
    margin: auto;
    background: rgba(0,0,0,0.5);
}

.video-wrapper button{
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    cursor: pointer;
    font-size: 17px;
    color: #fff;
    background: transparent;
}

.video-wrapper button[paused]{
    font-size: 12px;
}

iofe

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《JavaScript DOM编程艺术》HTML5新特性之video

1 html页面 movie download movie as mp4, orogg 2 js代码首先找到页面的video元素，对其分别应用addControls函数在addContro
复制链接

扫一扫