1.オーディオ
オーディオ：オーディオ
- src：再生するオーディオファイルのパス
- コントロール：オーディオプレーヤーのコントロールパネル
- 自動再生：自動再生
- ループ：ループ
<audio src="../mp3/xxx" controls autoplay loop></audio>
2.ビデオ
ビデオ：ビデオ
- src：再生するビデオファイルのパス
- コントロール：ビデオプレーヤーのコントロールパネル
- 自動再生：自動再生
- ループ：ループ
- 幅：幅
- 高さ：高さ
- ポスター：ビデオが完全にダウンロードされていない場合、またはユーザーがデフォルトで表示されている表紙をクリックしても、現在のビデオファイルの最初のフレームがデフォルトで表示されます
注意：幅と高さを設定する場合、通常は幅または高さのみが設定され、自動的に比例してスケーリングされます。幅と高さを同時に設定した場合、設定値が正確に比例しない限り、ビデオは設定された幅に調整されません
<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（）load、play（）play、pause（）pause
Jqはビデオ再生を制御する方法を提供しません。つまり、ビデオ再生を操作する場合は、ネイティブのjsメソッド（dom要素）を使用する必要があります
- 一般的な属性：
- currentTimeビデオ再生の現在の進行状況
- 時間：ビデオの合計時間100000/60
- 一時停止：ビデオ再生の状態
- 一般的なイベント：
- oncanplay：イベントは、ユーザーがオーディオ/ビデオの再生を開始できるときにトリガーされます。
- ontimeupdate：このイベントを使用して、現在の再生の進行状況を報告します。
- onended：再生が終了するとリセットされます
3、カスタムプレーヤー
効果：
コード：
<!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>