一、音频
audio：音频
- src:播放的音频文件的路径
- controls:音频播放器的控制面板
- autoplay:自动播放
- loop:循环
<audio src="../mp3/xxx" controls autoplay loop></audio>
二、视频
video：视频
- src:播放的视频文件的路径
- controls:视频播放器的控制面板
- autoplay:自动播放
- loop:循环
- width:宽度
- height:高度
- poster:当视频还没有完全下载或者用户还有点击播放前的默认显示的封面，默认显示当前视频文件的第一帧画面
注意：当设置宽高的时候，一般情况下只会设置宽度或高度，让其自动的等比例缩放。如果同时设置宽度高度，那么视频并不会真正的调整到设置的宽度，除非设置的值刚好是等比例的
<video src="../mp4/xxx" controls autoplay loop width="400px" poster="../imgs/xxx"></video>
重点说明source的使用：
因为不同浏览器支持的视频文件格式不一样，所以我们在进行视频添加的时候需要考虑到浏览器是否支持，我们可以准备多个格式的视频文件，让浏览器自动的选择
<video controls autoplay loop width="400px" poster="../imgs/xxx">
<source src="../mp4/flv.flv" type="video/flv">
<source src="../mp4/flv.mp4" type="video/mp4">
您的浏览器不支持当前的视频播放
</video>
- 常用方法：load() 加载、 play() 播放、 pause() 暂停
Jq没有提供对视频播放控件的方式，也就意味着如果要操作视频播放，必须使用原生的js方法—dom元素
- 常用属性：
- currentTime 视频播放的当前进度
- duration:视频的总时间 100000/60
- paused:视频播放的状态
- 常用事件：
- oncanplay: 事件在用户可以开始播放视频/音频（audio/video）时触发。
- ontimeupdate:通过该事件来报告当前的播放进度.
- onended:播放完时触发—重置
三、自定义播放器
效果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.container {
width: 500px;
margin: 100px auto;
}
.videoBox {
width: 500px;
height: 350px;
background-color: #000;
}
.video {
width: 500px;
height: 350px;
display: none;
}
.controls {
width: 100%;
height: 44px;
display: flex;
align-items: center;
padding: 0px 10px;
box-sizing: border-box;
background-color: #000;
color: #fff;
font-size: 13px;
border: 1px solid #555;
box-sizing: border-box;
}
.controls img {
width: 20px;
height: 20px;
cursor: pointer;
}
.progressBox {
width: 240px;
height: 8px;
background-color: #fff;
border-radius: 6px;
margin-left: 10px;
position: relative;
cursor: pointer;
}
.progressBox>div {
height: 100%;
border-radius: 6px;
position: absolute;
left: 0;
top: 0;
}
.progressCurrent {
width: 0%;
background-color: red;
z-index: 9;
}
.loadProgress {
width: 80%;
background-color: #ccc;
z-index: 6;
}
.maskProgress {
width: 100%;
z-index: 12;
}
.timeBox {
margin-left: 40px;
margin-right: 30px;
}
</style>
<body>
<div class="container">
<!-- 视频播放区域 -->
<div class="videoBox">
<video src="./imgs/2b43a51723612c9f1242848eef9a1347.mp4" class="video">
<source src="../mp4/flv.flv" type="video/flv">
<source src="../mp4/flv.mp4" type="video/mp4">
您的浏览器不支持当前的视频播放
</video>
</div>
<!-- 自定义控制条区域 -->
<div class="controls">
<img src="./imgs/play.png" class="playVideo">
<div class="progressBox">
<!-- 当前播放的进度条 -->
<div class="progressCurrent"></div>
<!-- 已加载的进度条 -->
<div class="loadProgress"></div>
<!-- 最上面的进度条做快进使用 -->
<div class="maskProgress"></div>
</div>
<div class="timeBox">
<span class="currentTime">00:00:00</span>
<span>/</span>
<span class="tatalTime">00:00:00</span>
</div>
<img src="./imgs/fullScreen.png" class="fullScreen">
</div>
</div>
<script src="./jquery-3.4.1.js"></script>
<script>
$(function () {
// 获取到播放器
var video = $('.video')[0] // 需要将jQuery元素转换为dom元素
// 播放或暂停视频
$('.playVideo').on('click', function () {
// 获取视频播放状态 - 返回true/false
let videoStatus = video.paused
if (videoStatus) {
// 视频播放
$('.playVideo').attr('src', './imgs/pause.png')
video.play()
} else {
// 视频暂停
$('.playVideo').attr('src', './imgs/play.png')
video.pause()
}
});
// 当视频可以进行播放的时候触发oncanplay
video.oncanplay = function () {
video.style.display = 'block'
// 获取视频的总时长,结果以秒作为单位
var duration = video.duration
// 计算 时 分 秒
let time = getTime(duration)
$('.tatalTime').html(time)
}
// 当视频在播放的时候，会触发ontimeupdate
video.ontimeupdate = function () {
// 获取播放的当前进度
let currentTime = video.currentTime
// 计算 时 分 秒
let time = getTime(currentTime)
$('.currentTime').html(time)
// 设置当前进度条的宽度
let width = currentTime / video.duration * 100
$('.progressCurrent').css('width', width + '%')
}
// 点击进度条设置视频播放进度
$('.maskProgress').on('click', function (e) {
// 获取点击的位置
let progress = e.offsetX
// 获取进度条的总长度
let progressWidth = $('.progressBox').width()
// 设置当前播放进度条的宽度
let width = progress / progressWidth
$('.progressCurrent').css('width', `${
width * 100}%`)
// 设置当前视频的播放进度
video.currentTime = video.duration * width
})
// 视频播放完成
video.onended = function () {
// 重置为视频播放之前的状态
$('.progressCurrent').css('width', '0px')
$('.playVideo').attr('src', './imgs/play.png')
$('.currentTime').html('00:00:00')
}
// 封装时间转换函数
function getTime(time) {
let hour = Math.floor(time / 3600);
let min = Math.floor(time % 3600 / 60);
let sec = Math.floor(time % 60);
hour = hour < 10 ? '0' + hour : hour
min = min < 10 ? '0' + min : min
sec = sec < 10 ? '0' + sec : sec
return hour + ':' + min + ':' + sec
}
// 播放器全屏设置
$('.fullScreen').on('click', function () {
if (video.requestFullScreen) {
video.requestFullScreen()
} else if (video.webkitRequestFullScreen) {
video.webkitRequestFullScreen()
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen()
} else if (video.msRequestFullScreen) {
video.msRequestFullScreen()
} else if (video.oRequestFullScreen) {
video.oRequestFullScreen()
}
})
})
</script>
</body>
</html>