1. Audio
audio: audio
- src: The path of the audio file to be played
- controls: the control panel of the audio player
- autoplay: autoplay
- loop: loop
<audio src="../mp3/xxx" controls autoplay loop></audio>
2. Video
video: video
- src: The path of the video file to be played
- controls: the control panel of the video player
- autoplay: autoplay
- loop: loop
- width: width
- height: height
- poster: When the video has not been completely downloaded or the user still clicks on the cover that is displayed by default, the first frame of the current video file is displayed by default
注意：When setting the width and height, generally only the width or height will be set, so that it will be automatically scaled in proportion. If you set the width and height at the same time, the video will not be adjusted to the set width, unless the set value is exactly proportional
<video src="../mp4/xxx" controls autoplay loop width="400px" poster="../imgs/xxx"></video>
重点说明source的使用：
Because different browsers support different video file formats, we need to consider whether the browser supports it when adding videos. We can prepare video files in multiple formats and let the browser automatically select
<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>
- Common methods: load() load, play() play, pause() pause
Jq does not provide a way to control the video playback, which means that if you want to operate the video playback, you must use the native js method—dom element
- Common attributes:
- currentTime The current progress of video playback
- duration: the total time of the video 100000/60
- paused: the state of video playback
- Common events:
- oncanplay: The event is triggered when the user can start playing audio/video.
- ontimeupdate: Use this event to report the current playback progress.
- onended: Triggered when playing is finished-reset
Three, custom player
Effect:
Code:
<!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>