H5多媒体学习笔记。

原始HTML模式

HTML5模式

视频：

<video src=""></video>

音频：

<audio src=""></audio>

音频

Audio 对象属性

属性	描述
audioTracks	返回表示可用音频轨道的 AudioTrackList 对象。
autoplay	设置或返回是否在就绪（加载完成）后随即播放音频。
buffered	返回表示音频已缓冲部分的 TimeRanges 对象。
controller	返回表示音频当前媒体控制器的 MediaController 对象。
controls	设置或返回音频是否应该显示控件（比如播放/暂停等）。
crossOrigin	设置或返回音频的 CORS 设置。
currentSrc	返回当前音频的 URL。
currentTime	设置或返回音频中的当前播放位置（以秒计）。
defaultMuted	设置或返回音频默认是否静音。
defaultPlaybackRate	设置或返回音频的默认播放速度。
duration	返回音频的长度（以秒计）。
ended	返回音频的播放是否已结束。
error	返回表示音频错误状态的 MediaError 对象。
loop	设置或返回音频是否应在结束时再次播放。
mediaGroup	设置或返回音频所属媒介组合的名称。
muted	设置或返回是否关闭声音。
networkState	返回音频的当前网络状态。
paused	设置或返回音频是否暂停。
playbackRate	设置或返回音频播放的速度。
played	返回表示音频已播放部分的 TimeRanges 对象。
preload	设置或返回音频的 preload 属性的值。
readyState	返回音频当前的就绪状态。
seekable	返回表示音频可寻址部分的 TimeRanges 对象。
seeking	返回用户当前是否正在音频中进行查找。
src	设置或返回音频的 src 属性的值。
textTracks	返回表示可用文本轨道的 TextTrackList 对象。
volume	设置或返回音频的音量。

Audio 对象方法

方法	描述
addTextTrack()	向音频添加新的文本轨道。
canPlayType()	检查浏览器是否能够播放指定的音频类型。
fastSeek()	在音频播放器中指定播放时间。
getStartDate()	返回新的 Date 对象，表示当前时间线偏移量。
load()	重新加载音频元素。
play()	开始播放音频。
pause()	暂停当前播放的音频。

案例1：音频

关于音频标签的更多介绍，可以查看W3school。

水平、重置方向居中布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>音频</title>
	</head>
	<body>
		<div class="bg">
			<div class="mediabox">
				<audio id="myaudio" src="res/纯音乐.mp3" controls="controls">你的浏览器不支持播放</audio>
			</div>
		</div>
	</body>
	<script>

	</script>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		.bg {
			/*弹性盒模型*/
			display: flex;
			/*主轴居中对齐,水平居中*/
			justify-content: center;
			/*侧轴居中对齐,垂直居中*/
			align-items: center;
			width: 100vw;
			height: 100vh;
		}
		.mediabox {
			width: 400px;
			/* background-color: pink; */
			text-align: center;
		}
	</style>
</html>

切换播放状态

使用js代码实现一个按钮，切换音频播放状态。（播放 –> 暂停。暂停 –> 播放）

1
2
3

//在音频标签<audio>的后边添加一个按钮，通过点击事件绑定函数change()
<br />
<button onclick="change('#myaudio')">切换</button>

js代码如下：

function change(audio) { //切换播放状态。形参可以为音频控件（标签）的id
    //音频控件，使用到的属性：
    //paused，设置或返回音频是否暂停。
    //使用到的方法：
    //play()，开始播放音频。
    //pause()，暂停当前播放的音频。
    let myaudio = document.querySelector(audio); //id，"#id名"；class，".class名"
    if (myaudio.paused) {
        //暂停中
        myaudio.play();
    } else {
        //播放中
        myaudio.pause();
    }
}

音量调节

使用range标签（滑动条），调节音量大小。

1
2
3

//在音频标签<audio>的后边添加一个range标签，通过onchange事件绑定函数volumeProgress()
<br />
<input id="myrange" type="range" value="20" step="1" max="100" onchange="volumeProgress('#myaudio','#myrange')">音量条</button>

js代码如下：

function volumeProgress(audio, range) { //音量进度条。形参可以为音频标签的id、进度条标签的id
    //音频控件，使用到的属性：
    //volume，设置或返回音频的音量。

    //进度条控件，使用到的属性：
    //max，设置或返回滑块控件的 max 属性值。
    //value，设置或返回滑块控件的 value 属性值。
    //https://www.w3school.com.cn/jsref/dom_obj_range.asp
    let myaudio = document.querySelector(audio); //音频控件
    let myrange = document.querySelector(range); //进度条
    //设置音频的播放音量volume，0到1。当前值除最大值，计算比例
    myaudio.volume = myrange.value / myrange.max;
}

进度条

使用range标签（滑动条），调节音频的播放进度。

1
2
3

//在音频标签<audio>的后边添加一个range标签，通过onchange事件绑定函数timeProgress()
<br />
<input id="myrange2" type="range" value="20" step="1" max="100" onchange="timeProgress('#myaudio','#myrange2')">播放进度条</button>

js代码如下：

function timeProgress(audio, range) { //播放进度，进度条
    //音频控件，使用到的属性：
    //currentTime，设置或返回音频中的当前播放位置（以秒计）。
    //duration，返回音频的长度（以秒计）。
    let myaudio = document.querySelector(audio); //音频控件
    let myrange = document.querySelector(range); //进度条
    var curtime = (myrange.value / myrange.max) * myaudio.duration;
    myaudio.currentTime = curtime;
}

案例2：自定义播放器

自定义视频播放器，课本P119

总结（重点）

简述使用HTML5方式实现视频和音频播放器的原因。（考试要考）

扩展

Aplayer播放器

安装（文档）

1	npm install aplayer --save

快速开始

<link rel="stylesheet" href="APlayer.min.css">
<div id="aplayer"></div>
<script src="APlayer.min.js"></script>
const ap = new APlayer({
    container: document.getElementById('aplayer'),
    audio: [{
        name: 'name',
        artist: 'artist',
        url: 'url.mp3',
        cover: 'cover.jpg'
    }]
});

或
import 'aplayer/dist/APlayer.min.css';
import APlayer from 'aplayer';

const ap = new APlayer(options);