多媒体播放 && 自定义播放控件

一.音频

<audio src="./video.mp3" controls></audio>

音频的属性

属性	值	说明
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放 [自动播放]
loop	loop	如果出现该属性，则当音频结束时重新开始播放 [循环播放]
preload	auto/meta/none	如果出现该属性，则音频在页面加载时进行加载，并预备播放 [预加载]

常见媒体音频格式和浏览器的支持

	IE9	Firefox3.5	Opera10.5	Chrome3.0	Safari3.0
Ogg Vorbis		√	√	√
MP3	√			√	√
Wav		√	√		√

二.视频

  <video src="./02.MP4" controls> </video>

视频的属性

属性	值	说明
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放 [自动播放]
loop	loop	如果出现该属性，则当视频结束时重新开始播放 [循环]
preload	auto	如果出现该属性，则视频在页面加载时进行加载，并预备播放 [预加载]
width/height	length(px)	设置视频播放器的宽度/高度

常见媒体视频格式和浏览器的支持

	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

三.自定义播放插件

因为每个浏览器自带的播放插件都不一样，而且美观度较差，所以我们可以使用JS来自定义创建一个播放控件

1.自定义播放控件属性

controls : 显示或隐藏用户控制界面

autoplay : 媒体是否自动播放

loop : 媒体是否循环播放

paused : 媒体是否暂停(只读)

ended : 媒体是否播放完毕(只读)

currentTime : 开始播放到现在所用的时间

duration : 媒体总时间(只读)

volume : 0.0-1.0的音量相对值

muted : 是否静音

2.需要用到的方法和事件

play() : 媒体播放

pause() : 媒体暂停

webkitRequestFullScreen():全屏

timeupdate : 时间更新

canplay: 可以播放

1.鼠标点击播放时视频播放，点击暂停让视频暂停
注意:所有内容都要在在 canplay事件内进行

video.oncanplay = function() {
    jp_play.onclick = function() {
        video.play()
        this.style.display = 'none'
        jp_pause.style.display = 'block'
    }

    jp_pause.onclick = function() {
            video.pause()
            this.style.display = 'none'
            jp_play.style.display = 'block'
        }
    }

2.封装一个获取视频最大时间和已播放时间的函数

    function date(time) {
        let fen = parseInt(time / 60)
        fen = fen > 10 ? fen : fen = '0' + fen
        let miao = parseInt(time % 60)
        miao = miao > 10 ? miao : miao = '0' + miao
        return fen + ':' + miao
    }

3.将这两个时间添加在样式中

    jp_duration.innerHTML = date(video.duration)

    //    变化
    video.ontimeupdate = function() {
        jp_current_time.innerHTML = date(video.currentTime)

        jp_play_bar.style.width = (video.currentTime / video.duration) * 100 + '%'
    }

4.鼠标点击进度条，使进度条长度，已播放时间，视频播放时间一起发生相对应的改变

jp_seek_bar.onclick = function(e) {
        let bili = e.offsetX / jp_seek_bar.offsetWidth
        jp_current_time.innerHTML = date(bili * video.duration)
        jp_play_bar.style.width = (bili * 100) + '%'
        video.currentTime = bili * video.duration
    }

5.调整声音大小，原理与拖拽进度条相似

 jp_volume_bar_value.onclick = function(a) {
        let bili2 = a.offsetX / jp_volume_bar_value.offsetWidth
        video.volume = 1 * bili2
        handle.style.left = bili2 * 100 + '%'
    }

6.点击全屏图标，使视频全屏播放

  jp_full_screen.onclick = function() {
        video.webkitRequestFullScreen()
    }