HTML5 video

<video>标签的属性

src ：视频的属性
poster：视频封面，没有播放时显示的图片
preload：预加载
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制条
width：视频宽度
height：视频高度

html 代码

//audio和video都可以通过JS获取对象,JS通过id获取video和audio的对象

获取video对象

Media = document.getElementById("media");

Media方法和属性：

HTMLVideoElement和HTMLAudioElement 均继承自HTMLMediaElement

Media.error; //null:正常
Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效

//网络状态
- Media.currentSrc; //返回当前资源的URL
- Media.src = value; //返回或设置当前资源的URL
- Media.canPlayType(type); //是否能播放某种格式的资源
- Media.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
- Media.load(); //重新加载src指定的资源
- Media.buffered; //返回已缓冲区域，TimeRanges
- Media.preload; //none:不预载 metadata:预载资源信息 auto:

//准备状态
- Media.readyState;//1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
- Media.seeking; //是否正在seeking

//回放状态

Media.currentTime = value; //当前播放的位置，赋值可改变位置
Media.startTime; //一般为0，如果为流媒体或者不从0开始的资源，则不为0
Media.duration; //当前资源长度流返回无限
Media.paused; //是否暂停
Media.defaultPlaybackRate = value;//默认的回放速度，可以设置
Media.playbackRate = value;//当前播放速度，设置后马上改变
Media.played; //返回已经播放的区域，TimeRanges，关于此对象见下文
Media.seekable; //返回可以seek的区域 TimeRanges
Media.ended; //是否结束
Media.autoPlay; //是否自动播放
Media.loop; //是否循环播放
Media.play(); //播放
Media.pause(); //暂停

//视频控制

Media.controls;//是否有默认控制条
Media.volume = value; //音量
Media.muted = value; //静音
TimeRanges(区域)对象
TimeRanges.length; //区域段数
TimeRanges.start(index) //第index段区域的开始位置
TimeRanges.end(index) //第index段区域的结束位置

//相关事件

var eventTester = function(e){

Media.addEventListener(e,function(){

console.log((new Date()).getTime(),e)

},false);

}

eventTester("loadstart"); //客户端开始请求数据
eventTester("progress"); //客户端正在请求数据
eventTester("suspend"); //延迟下载
eventTester("abort"); //客户端主动终止下载（不是因为错误引起）
eventTester("loadstart"); //客户端开始请求数据
eventTester("progress"); //客户端正在请求数据
eventTester("suspend"); //延迟下载
eventTester("abort"); //客户端主动终止下载（不是因为错误引起），
eventTester("error"); //请求数据时遇到错误
eventTester("stalled"); //网速失速
eventTester("play"); //play()和autoplay开始播放时触发
eventTester("pause"); //pause()触发
eventTester("loadedmetadata"); //成功获取资源长度
eventTester("loadeddata"); //
eventTester("waiting"); //等待数据，并非错误
eventTester("playing"); //开始回放
eventTester("canplay"); //可以播放，但中途可能因为加载而暂停
eventTester("canplaythrough"); //可以播放，歌曲全部加载完毕
eventTester("seeking"); //寻找中
eventTester("seeked"); //寻找完毕
eventTester("timeupdate"); //播放时间改变
eventTester("ended"); //播放结束
eventTester("ratechange"); //播放速率改变
eventTester("durationchange"); //资源长度改变
eventTester("volumechange"); //音量改变

注意：currentTime属性在谷歌浏览器上使用时视频路径必须是http...的远程路径，否则currentTime无效；

在火狐浏览器上正常

案例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #video{
            width: 700px;
            height: 500px;
            margin: 0 auto;
            background-color: #93ffc5;
        }
        #mp4par{
            width: 500px;
            height: 500px;
            position: relative;
            background-color: #000000;
            float: left;
            overflow: hidden;
        }
        #mp4{
            width: 500px;
            height: 500px;
            position: relative;
        }
        #controls{
           position: absolute;
            width: 500px;
            height: 90px;
            bottom: -90px;
            background-color: rgba(235, 235, 235, 0.54);
            transition: all 0.3s linear;
            z-index: 10;
        }
        #mp4par:hover #controls {
            bottom: 0;
        }
        #btntime{
            width: 500px;
        }
        #btnsound{
            position: relative;
            top: 5px;
        }
        button{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #acecff;
            color: #ff4c94;
            font-size: 13px;
            text-align: center;
            line-height: 50px;
            border-style: none;
            outline: none;
        }
    </style>
</head>
<body>
<div id="video">
    <div id="mp4par">
        <video id="mp4" src="MP4/high.mp4"></video>
        <div id="controls">
            <input type="range" id="btntime" value="0" max="100"/><br/>
            <button id="start">播放</button>
            <button id="btngo">快进</button>
            <button id="btnback">快退</button>
            <button id="btns">静音</button>
            <input type="range" id="btnsound" value="0" max="100"/>
            <button id="big">全屏</button>
            <button>下载</button>
        </div>
    </div>
</div>
<script>
    var start = document.getElementById("start");
    var video = document.getElementById("mp4");
    var btntime = document.getElementById("btntime");
    var btngo = document.getElementById("btngo");
    var btnback = document.getElementById("btnback");
    var btns = document.getElementById("btns");
    var btnsound = document.getElementById("btnsound");
    var big = document.getElementById("big");
    var time1;
    var time2;

    //视频回放时执行
    video.onplaying=function(){
        var alltime=this.duration;//duration  返回当前音频/视频的长度，以秒计。
        btntime.setAttribute("max",alltime);//创建或改变某个新属性。
    };

    //视频播放位置发生变化的时候执行
    video.ontimeupdate = function () {//ontimeupdate  播放时间改变事件
        btntime.value = this.currentTime;//currentTime  当前播放的位置，赋值可改变位置
    };
    //拖动进度条
    btntime.addEventListener("mousedown",function(){
        video.pause();
        this.onmousemove=function(){
            video.currentTime=this.value;
        };
        this.onmouseup=function(){
            video.play();
            this.onmousemove=null;
            this.onmouseup=null;
        }
    });
    btngo.addEventListener("click",function(){
        clearInterval(time2);

        start.innerHTML="播放";
        video.pause();
            time1= setInterval(function () {
                video.currentTime += 5;
            }, 1000);
    });
    btnback.addEventListener("click",function(){
        clearInterval(time1);
        start.innerHTML="播放";
        video.pause();
        time2 = setInterval(function () {
            video.currentTime -= 5;
            if (video.currentTime <= 0) {
                video.play();
                clearInterval(time1);
                clearInterval(time2);
            }
        }, 1000);
    });
    //静音
    btns.addEventListener("click",function(){
        video.muted=!video.muted;  //muted静音
    });
    //音量进度条
    btnsound.addEventListener("mousedown",function(){
        this.onmousemove=function(){
            video.volume=this.value/100;
        };
        this.onmouseup = function () {
            this.onmousemove = null;
            this.onmouseup = null;
        }
    });
    //全屏
    big.addEventListener("click",function(){
        if (video.webkitRequestFullScreen) {
            video.webkitRequestFullScreen();
        }
        if (video.mozRequestFullScreen) {
            video.mozRequestFullScreen();
        }
        if (video.msRequestFullScreen) {
            video.msRequestFullScreen();
        }
        if (video.RequestFullScreen) {
            video.RequestFullScreen();
        }
    });

    //播放与暂停
    start.addEventListener("click",function(){
        if(this.innerHTML=="播放"){
            video.play();
            this.innerHTML="暂停";
            clearInterval(time1);
            clearInterval(time2);
        }
        else{
            video.pause();
            this.innerHTML="播放"
        }
    });


</script>
</body>
</html>

猜你喜欢