h5 视频

1. Video 标签属性

1. Src 视频url地址
2. Autoplay 视频就绪自动播放
3. controls 向用户显示播放控件
4. Width 设置播放器宽度
5. Height 设置播放器高度
6. Loop 播放完是否继续播放该视频，循环播放
7. Preload是否等加载完再播放
8. Poster加载等待的画面图片
9. Autobuffer设置为浏览器缓冲方式，不设置autoply才有效

 <video 
        width="1000" 
        height="300" 
        src="./dy.mp4" 
        controls 
        Preload 
        Poster='../1.jpg'
></video>

4.1 关于source标签

由于视频数据非常非常的重要, 所以五大浏览器厂商都不愿意支持别人的视频格式, 所以导致了没有一种视频格式是所有浏览器都支持的
这个时候W3C为了解决这个问题, 所以推出了第二个video标签的格式

<video>
	<source src="./dy.mp4" type="video/mp4">
	<source src="./dy.mp4" type="video/mp4">
</video>

5.Video API方法

1. play() 开始播放视频

2. pause() 停止播放视频

3. 全屏:

    webkit    element.webkitRequestFullScreen();
    Firefox    element.mozRequestFullScreen();
    W3C        element.requestFullscreen();
   

4. 退出全屏：

    webkit    document.webkitCancelFullScreen(); 
    Firefox    document.mozCancelFullScreen(); 
    W3C       document.exitFullscreen();
   

6. 基本事件

1. onplay 视频播放时触发的事件
2. onpause 视频暂停时触发的事件
3. ontimeupdate 视频在播放时持续触发是事件
4. onended 视频播放结束时触发的事件

 let vio = document.getElementsByTagName('video')[0]

 vio.onplay = function() {
     console.log('我播放了')
 }

 vio.onpause = function() {
     console.log('我暂停了')
 }

 vio.ontimeupdate = function() {
     console.log('持续播放')
 }

 vio.onended = function() {
     console.log('播放结束')
 }

7. Video API属性

1. currentTime : 开始到播放现在所用的时间(单位是秒)
2. duration : 媒体总时间(只读)
3. volume : 0.0-1.0的音量相对值
4. muted : 是否静音 false /true
5. paused : 媒体是否暂停(只读)
6. ended : 媒体是否播放完毕(只读)
7. error : 媒体发生错误的时候，返回错误代码 (只读)
8. currentSrc : 以字符串的形式返回媒体地址(只读)

btn.onclick = function () {
    box.innerHTML = `
        当前播放时间:${video.currentTime}<br/>
        总时间:${video.duration}<br/>
        音量:${video.volume}<br/>
        是否静音:${video.muted}<br/>
        是否暂停:${video.paused}<br/>
        是否播放完毕:${video.ended}<br/>
        是否发生错误:${video.error}<br/>
        地址:${video.currentSrc}`;
}

二. HTML 5 音频

1. audio 标签属性

1. src 要播放的音频的 URL。
   1. autoplay自动播放
   2. controls向用户显示播放控件
      1. loop循环
   3. preload是否等加载完再播放

3. audio API属性

1. duration 音乐的总时间
2. currentTime 音乐当前时间
3. ended 音乐播是否播放完毕
4. play: 音乐播放
5. pause:音乐暂停