H5-新增标签-video

video标签简介

作用主要用来承载视频格式的标签
Video替代flash 视频

//基本用法
<video></video>

video的基本属性

行盒：默认w300，h150
src：用来链接视频地址（至少提供两种视频格式文件，避免出现视频格式不兼容问题：flv,swf,ogg,webm,mp4）
controls：视频默认控件（Boolean 有暂停，播放，声音，倍速，全屏等功能，但每个浏览器显示不同）
autoplay单独设置无效果需使用方法；
controls：是否显示播放控件，不同浏览器控件外观不一致；
currentTime：0 当前播放的时间点，可赋值跳转
duration：视频总时长(s);
ended：boolean，是否播放完成
loop：是否循环播放
muted：是否静音(静音后浏览器可以自动播放)
volum：0-1，音量设置，默认是最大值，且是js对象属性，不能在标签上直接写。
pasued：当前是否处于暂停状态
poster：指定视频的第一帧为海报
metadata 元数据只预加载视频宽度，时长，第一帧内容
auto：自动预加载，时长，第一帧内容，并缓冲一段时长
none：任何内容不加载

各浏览器对视频格式的兼容

//多格式
<video>
<source src='res/birdes.mp4'/>
<source src='res/birdes.webm'/>
<source src='res/birdes.ogg'/>\
你的浏览器不支持video标签
</video>

Video方法

play(); 播放方法
pause():暂停方法

video案例

video自定义控件

//js代码
// 获取video
    var ovideo = document.querySelector('video');
    var play = document.querySelector('.paly');
    // 时间
    var otimer = document.querySelector('.timer');
    // 进度
    var progress_bar = document.querySelector('.progress_bar');
    var nowprogress_bar = document.querySelector('.progress_bar div');
    var nowprogress_icon = document.querySelector('.progress_bar i');
    var timer = null;
    // 倍速
    var quick = document.querySelector('.suit');
    var quick_list = document.querySelector('.suit ul');
    var quick_list_item = document.querySelectorAll('.suit ul li');
    // 音量
    var addsound = document.querySelector('.sound-add');
    var liltsound = document.querySelector('.sound-liit');
    var stopsound = document.querySelector('.sound-stop');
    // 全屏
    var allvidedo = document.querySelector('.allvidedo');

    // 视频播放和暂停
    function start() {
        play.onclick = function() {
            if (ovideo.paused) {
                ovideo.play();
                this.style.backgroundImage = "url('./暂停.png')";
                timer = setInterval(function() {
                    // 总时长
                    var total = ovideo.duration;
                    // 现在时长
                    var nowtime = ovideo.currentTime;
                    //更新
                    otimer.innerHTML = `${parseInt(nowtime/60)}:${String(parseInt(nowtime%60)).padStart(2,0)}/${parseInt(total/60)}:${String(parseInt(total%60)).padStart(2,0)}`;

                    // 当前播放的长度
                    var nowprogress_barWidth = nowtime / total * progress_bar.clientWidth;
                    nowprogress_bar.style.width = nowprogress_barWidth + 'px';
                    nowprogress_icon.style.left = nowprogress_barWidth - 3 + 'px';
                }, 30);
            } else {
                ovideo.pause();
                this.style.backgroundImage = "url('./播放.png')";
                clearInterval(timer);
            }
        }
    }
    // 进度条
    progress_bar.onclick = function(e) {
            var location = e.layerX;
            console.log(location);
            var width = this.clientWidth;
            var targetTime = location / width * ovideo.duration;
            // 给video设置当前时间
            ovideo.currentTime = targetTime;
        }
        // 倍速
    quick.onclick = function() {
        quick_list.style.display = 'block';
    }
    quick_list.onmouseleave = function() {
        quick_list.style.display = 'none';
    }
    for (var i = 0; i < quick_list_item.length; i++) {
        quick_list_item[i].index = i;
        quick_list_item[i].onclick = function() {
            switch (this.index) {
                case 0:
                    // 两倍
                    ovideo.playbackRate = 2;
                    break;
                case 1:
                    //1.5
                    ovideo.playbackRate = 1.5;
                    break;
                case 2:
                    //1.25
                    ovideo.playbackRate = 1.25;
                    break;
                default:
                    //正常
                    ovideo.playbackRate = 1;
                    break;
            }

        }
    }
    addsound.onclick = function() {
        ovideo.volume = ovideo.volume + 0.1 >= 1 ? 1 : ovideo.volume + 0.1;
    };
    liltsound.onclick = function() {
        ovideo.volume = ovideo.volume - 0.1 <= 0 ? 0 : ovideo.volume - 0.1;
    };
    stopsound.onclick = function() {
        if (ovideo.volume == 0) {
            ovideo.volume = 1;
            stopsound.style.backgroundImage = "url('./静音.png')";
        } else {
            ovideo.volume = 0;
            stopsound.style.backgroundImage = "url('./静音 (1).png')";
        }
    };
    // 全屏
    allvidedo.onclick = function() {
        ovideo.webkitRequestFullScreen();
    }
    start();