多媒体标签

video

只接受几种视屏格式：ogg、mp4、avi

基本使用：

1
2
3
4
5
6
7
<video src="视屏文件路径"></video>
<!-- 兼容写法 -->
<video>
    <source src="路径1" type="video/mp4"></source>
    <source src="路径2" type="video/ogg"></source>
    <source src="路径3" type="video/avi"></source>
</video>

controls属性，出现默认的控制面板

autoplay属性，自动播放

loop属性，循环播放

width和height属性，用来设置视屏可视区域的尺寸，但是宽和高一直会保持等比，所以设置一个就行了，如果都设置了，会出现黑边，但可视区域是等比的

audio

只接受ogg和mp3格式，使用方式和video是一样的

1
2
3
4
5
6
<audio src="视屏文件路径"></audio>
<!-- 兼容写法 -->
<audio>
    <source src="路径1" type="audio/mp3"></source>
    <source src="路径2" type="audio/ogg"></source>
</audio>

controls属性，出现默认的控制面板

autoplay属性，自动播放

loop属性，循环播放

多媒体标签的API

在谷歌浏览器中，默认不能自动播放，默认直接调用play方法播放，需要一个自定义按钮来解决或设置video静音

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* 方法 */
video/audio.play() // 播放
video/audio.pause() // 暂停
/* 属性 */
video.duration // 视屏总时长
video.muted // 设置媒体静音，值为true或false，获取媒体是否静音
video.volume // 获取媒体当前声音(0~1)，设置声音(0~1)
video.currentTime // 获取媒体当前时间，设置当前时间，单位秒
video/audio.paused // 查看媒体是否暂停
video/audio.playbackRate // 获取/设置播放倍速
/* 事件 */
loadstart：视屏开始加载时触发
progress：浏览器正在下载视屏时触发 - 相当于在加载
canplay：媒体加载完毕，可以播放的时候触发
play：视屏正在播放的时候触发
pause：视屏暂停的时候触发
seeking：视屏开始要跳到新位置的时候触发
seeked：视屏已经跳到新位置的时候触发
waiting：视屏加载等待时触发
timeupdate：只要播放时间更改就会触发
ended：媒体播放结束时触发
error：视屏播放错误时触发
volumechange：视屏音量改变时触发
ratechange：视屏播放速度更改时触发

自定义多媒体控件

布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="media">
    <div class="playOrPause">
        <i class="iconfont icon-zanting"></i>
    </div>
    <div class="time">
        <span class="currentMinute">00</span>
        :
        <span class="currentSecond">00</span>
        /
        <span class="durationMinute">00</span>
        :
        <span class="durationSecond">00</span>
    </div>
    <div class="playRange">
        <div class="currentRange"></div>
        <div class="playBtn"></div>
    </div>
    <div class="volume">
        <div class="volumeRange">
            <div class="currentVolume"></div>
            <div class="volumeBtn"></div>
        </div>
        <i class="iconfont icon-volume"></i>
    </div>
</div>

样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
.media{
    width: 800px;
    height: 50px;
    border:3px solid #bbb;
    margin:300px auto;
}
.media>div{
    float:left;
    line-height: 50px;
    margin:0 10px;
}
.media>div.playRange{
    width: 200px;
    height: 6px;
    background-color: #333;
    margin:22px 10px;
    border-radius:3px;
    position: relative;
}
.media>div.playRange .currentRange{
    width: 100px;
    height: 6px;
    background-color: rgb(9, 143, 153);
    position:absolute;
    left: 0;
    top: 0;
}
.media>div.playRange .playBtn{
    width: 20px;
    height: 20px;
    background-color:rgb(9, 143, 153);
    border-radius:50%;
    position: absolute;
    left: 90px;
    top: -7px;
}
.media .volume{
    position:relative;
}
.media .volumeRange{
    width: 4px;
    height: 100px;
    background-color: #333;
    border-radius:2px;
    position:absolute;
    top:-100px;
    left: 10px;
    display:none;
}
.media .volumeRange .currentVolume{
    width: 4px;
    height: 50px;
    background-color: blue;
    border-radius:2px;
    position:absolute;
    left: 0;
    bottom:0;
}
.media .volumeRange .volumeBtn{
    width: 15px;
    height: 15px;
    border-radius:50%;
    background-color: blue;
    position:absolute;
    left: -5px;
    bottom:40px;
}
.media i{
    font-size: 24px;
}

js效果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
// 控制音量的面板显示隐藏
$('.media .volume').hover(function(){
    $(this).find('.volumeRange').show()
},function(){
    $(this).find('.volumeRange').hide()
})

// 点击切换小图标
$('.media .playOrPause i').click(function(){
    if($(this).hasClass('icon-bofang')){
        $(this).removeClass('icon-bofang').addClass('icon-zanting')
        // 多媒体播放
        $('audio')[0].play()
    }else{
        $(this).removeClass('icon-zanting').addClass('icon-bofang')
        // 多媒体暂停
        $('audio')[0].pause()
    }
})
$('.media .volume i').click(function(){
    if($(this).hasClass('icon-volume')){
        $(this).removeClass('icon-volume').addClass('icon-jingyin')
        // 让多媒体静音
        $('audio')[0].muted = true
        // 让音量小球下来
        $('.currentVolume').height(0)
        console.log(-$('.volumeBtn').height()/2)
        $('.volumeBtn').css('top',$('.volumeRange').height()-$('.volumeBtn').height()/2 + "px")
    }else{
        $(this).removeClass('icon-jingyin').addClass('icon-volume')
        // 取消静音
        $('audio')[0].muted = false
    }
})
// 拖拽播放进度
$('.playRange').mousedown(function(e){
    // 让小球过来 - 获取光标按下的位置，计算小球的left
    var x = e.pageX;
    var left = x - $('.playBtn').width()/2;
    $('.playBtn').offset({left})
    var width = $('.playBtn').position().left + $('.playBtn').width()/2
    $('.currentRange').width( width )
    // // 根据当前拖拽好的位置设置多媒体
    // // 比例 = 当前播放过的进度条长度 / 进度条总长度
    var percent = width / $('.playRange').width()
    // 当前播放时长 = 总时长*比例
    var duration = $('audio')[0].duration;
    var currentTime = percent * duration;

    $('audio')[0].currentTime = currentTime;
    // $('audio')[0].pause()
    // 移动
    $(this).mousemove(function(e){
        // 让小球过来 - 获取光标按下的位置，计算小球的left
        var x = e.pageX;
        var left = x - $('.playBtn').width()/2;
        $('.playBtn').offset({left})
        var width = $('.playBtn').position().left + $('.playBtn').width()/2
        $('.currentRange').width( width )
        $('audio')[0].pause()
        $('.media .playOrPause i').removeClass('icon-zanting').addClass('icon-bofang')
    })
})
$('.playRange').mouseup(function(e){
    $('.playRange').off('mousemove')
    var width = $('.currentRange').width()
    // 根据当前拖拽好的位置设置多媒体
    // 比例 = 当前播放过的进度条长度 / 进度条总长度
    var percent = width / $('.playRange').width()
    // 当前播放时长 = 总时长*比例
    var duration = $('audio')[0].duration;
    var currentTime = percent * duration;
    $('audio')[0].currentTime = currentTime;
    $('audio')[0].play()
    $('.media .playOrPause i').removeClass('icon-bofang').addClass('icon-zanting')
})

// 拖拽音量
$('.volumeRange').mousedown(function(e){
    // 让小球过来 - 获取光标按下的位置，计算小球的left
    var y = e.pageY;
    var top = y - $('.volumeBtn').width()/2
    $('.volumeBtn').offset({top})
    $('.currentVolume').height( $('.volumeRange').height() - $('.volumeBtn').position().top - $('.volumeBtn').height()/2 )
    // 计算音量的比例
    var volume = ($('.currentVolume').height() / $('.volumeRange').height()).toFixed(1)-0
    $('audio')[0].volume = volume

    $(this).mousemove(function(e){
        var y = e.pageY;
        var top = y - $('.volumeBtn').width()/2
        $('.volumeBtn').offset({top})
        $('.currentVolume').height( $('.volumeRange').height() - $('.volumeBtn').position().top - $('.volumeBtn').height()/2 )
        // 计算音量的比例
        var volume = ($('.currentVolume').height() / $('.volumeRange').height()).toFixed(1)-0
        $('audio')[0].volume = volume
    })
})
$(document).mouseup(function(e){
    $('.volumeRange').off('mousemove')
})

// 当多媒体加载完成的时候获取多媒体的播放时长
$('audio')[0].addEventListener('canplay',canplay)
function canplay(){
    var duration = this.duration; // 秒
    // 换算成分钟和秒
    var minute = parseInt(duration/60)
    var second = parseInt(duration%60);
    minute = minute<10?'0'+minute:minute;
    second = second<10?'0'+second:second;
    $('.durationMinute').text(minute)
    $('.durationSecond').text(second)
    // 将播放进度小球放到0的位置
    $('.playBtn').css('left',-$('.playBtn').width()/2 + "px")
    $('.currentRange').width(0)
    // 将音量设置在最顶端
    $('.volumeBtn').css('top',-$('.volumeBtn').height()/2 + "px")
    $('.currentVolume').height($('.volumeRange').height())
}

// 正在播放过程中获取当前播放的时长
$('audio')[0].addEventListener('timeupdate',timeupdate)
function timeupdate(){
    // 获取 当前时长
    var currentTime = this.currentTime;
    var minute = parseInt(currentTime/60)
    var second = parseInt(currentTime%60);
    minute = minute<10?'0'+minute:minute;
    second = second<10?'0'+second:second;
    $('.currentMinute').text(minute)
    $('.currentSecond').text(second)
    // 计算当前播放过多少的比例
    var duration = this.duration; 
    var percent = currentTime / duration;
    // 计算播放过的进度条的长度
    var width = $('.playRange').width() * percent;
    $('.currentRange').width(width)
    $('.playBtn').css('left',width-$('.playBtn').width()/2 + "px")
}

// 多媒体播放结束
$('audio')[0].addEventListener('ended',ended)
function ended(){
    $('.media .playOrPause i').removeClass('icon-zanting').addClass('icon-bofang')
}