视频

标签:video
autoplay 自动播放
controls 显示控件
loop 循环播放
js控制
获取video对象
oV.play() 播放
oV.pause() 暂停
oV.currentTime 播放时间(++ -- )
oV.volume 声音(+=0.1 -=0.1 )
oV.muted 静音 (ture)
oV.webkitRequestFullscreen 全屏
mp4格式视频,各高级浏览器都支持

<title>视频m</title>
<style>
video{ width:600px; }
meter{ width:600px; height:30px; }
</style>
<script>
window.onload=function (){
    var aInp=document.querySelectorAll('input');
    var oV=document.querySelector('video');
    var oM=document.querySelector('meter');

    //播放
    aInp[0].onclick=function (){
        oV.play();
    };
    //暂停
    aInp[1].onclick=function (){
        oV.pause();
    };
    //快进
    aInp[2].onclick=function (){
        oV.currentTime++;
    };
    //快退
    aInp[3].onclick=function (){
        oV.currentTime--;
    };
    //音量+
    aInp[4].onclick=function (){
        oV.volume+=0.1;
    };
    //音量-
    aInp[5].onclick=function (){
        oV.volume-=0.1;
    };
    //静音
    aInp[6].onclick=function (){
        oV.muted=!oV.muted
    };
    //全屏
    aInp[7].onclick=function (){
        oV.webkitRequestFullscreen();
    };
    //进度条
    oV.ontimeupdate=function (){
        var scale=oV.currentTime/oV.duration;
        oM.value=scale*100;
    };
    var x=0;
    oM.onmousedown=function (ev){
        var disX=ev.pageX-x;
        document.onmousemove=function (ev){
            x=ev.pageX-disX;
            oM.value=x/600*100;
            oV.currentTime=oV.duration*x/600;
        };
        document.onmouseup=function (){
            document.onmousemove=null;
            document.onmouseup=null;
        };
        return false;
    };
};
</script>
</head>

<body>
    <input type="button" value="播放" />
    <input type="button" value="暂停" />
    <input type="button" value="快进" />
    <input type="button" value="快退" />
    <input type="button" value="音量+" />
    <input type="button" value="音量-" />
    <input type="button" value="静音" />
    <input type="button" value="全屏" /><br />
    <meter max="100" value="0"></meter><br />
    <video src="video/1.mp4" controls></video>
</body>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容