html5——video标签 audio标签

video 标签：

<video src=""></video> //默认不播放

• autoplay：自动播放
• poster：暂位图片（默认视频第一帧图像 poster="url" 来设置占位图）
• controls：控制条
• loop：循环播放
• preload：预加载（与autoplay相冲 二选一）
• muted：静音
• height/width：高宽设置（注意只设置一个值就好了，设置两个并不会达到想要的效果，除非恰好与视频等比例）

兼容写法：解决视屏兼容不同浏览器

<video>
	<source src="url.mp4" type="video/mp4"></source>
	<source src="url.webm" type="video/webm"></source>
	<source src="url.ogg" type="video/ogg"></source>
</video>

• MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
• WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
• Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

audio 标签

audio 和 video 一样两种写法
除了 height/width/poster 不可用 剩下属性同 video

兼容写法：解决视屏兼容不同浏览器

<audio>
    <source src="url.mp3" type="audio/mpeg">
    <source src="url.wav" type="audio/wav">
    <source src="url.ogg" type="audio/ogg">
</audio>

video 视频 / audio音频

参考手册

1. 常用方法：

load() - 加载
play() - 播放
pause() - 暂停
jq 没有提供对视频播放控件的方式，也就意味着如果要操作视频播放，必须使用原生的 js 方法 — dom 元素

2. 常用属性：

a) currentTime - 视频播放的当前进度
b) duration - 视频的总时间
c) paused - 视频播放的状态

3. 常用事件：

a) oncanplay - 事件在用户可以开始播放视频/音频（audio/video）时触发
b) ontimeupdate - 通过该事件来报告当前的播放进度
c) onended - 播放完时触发—重置

实例：

<script src="../js/jquery.min.js"></script>
<script>
    /*获取到播放器*/
    var video=$("video")[0];
    
    /*暂停-播放切换*/
    $(".switch").click(function(){
        //1.切换样式，从暂停切换到播放，或者从播放切换到暂停
        $(this).toggleClass("fa-pause fa-play");
        //2.修改播放器的状态
        if(video.paused){
            video.play();
        }
        else{
            video.pause();
        }
    });
    
    /*全屏*/
    $(".expand").click(function(){
        video.webkitRequestFullScreen();
    });
    
    /*当可以进行播放的时候触发oncanplay*/
    video.oncanplay=function(){
        setTimeout(function(){
            video.style.display="block";
            //1.获取视频的总时长,结果以秒作为单位
            var duration=video.duration;
            /*console.log(duration);*/  //256.278
            //2.计算 时  分  秒
            var hour= Math.floor(duration/3600);
            var menite= Math.floor(duration%3600/60);
            var second=Math.floor(duration%60);
            //3.将时分秒信息填充到总时长span中
            //3.1 设置时分秒的格式
            hour=hour<10?"0"+hour:hour;
            menite=menite<10?"0"+menite:menite;
            second=second<10?"0"+second:second;
            //3.2填充
            $(".totalTime").html(hour+":"+menite+":"+second);
        },2000);
    }
    
    /*当视频在播放的时候，会触发下下面的方法ontimeupdate*/
    video.ontimeupdate=function(){
        //1.获取当前已经播放过了时间
        var elapseTime=video.currentTime;
        //2.获取已过时间的时分秒
        var hour= Math.floor(elapseTime/3600);
        var menite= Math.floor(elapseTime%3600/60);
        var second=Math.floor(elapseTime%60);
        //3.将时分秒信息填充到当前时长span中
        //3.1 设置时分秒的格式
        hour=hour<10?"0"+hour:hour;
        menite=menite<10?"0"+menite:menite;
        second=second<10?"0"+second:second;
        //3.2填充
        $(".currentTime").html(hour+":"+menite+":"+second);
        //4.设置当前<div class="elapse"></div>的宽度
        var valuePercent=0;
        if(elapseTime>0){
            valuePercent=elapseTime/video.duration*100;
            $(".elapse").css("width",valuePercent+"%");
        }
    }
</script>