[H5]HTML5音频与视频
内容包括：音频播放、编解码工具和视频播放。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<!--音频播放-->
<!--Audio(音频) HTML5提供的播放音频文件的标准-->
<!--control(控制器) 属性提供播放、暂停和音量控件-->
<!--<audio> 定义-->
<!--<source> 多媒体资源，可以是多个（有的浏览器支持MP3有的支持ogg格式）-->
<!--系统样式的播放器-->
<audio src="video/yycy.mp3" controls="controls">你的浏览器不支持这个格式的音频播放</audio>
<!--自定义样式-->
<audio id="audioID" src="video/xgz.flac">你的浏览器不支持这个格式的音频播放</audio>
<button onclick="playOrPauseAction()">播放/暂停</button>
<script>
var tempAudio = document.getElementById("audioID");
function playOrPauseAction () {
if (tempAudio.paused) {
tempAudio.play();
} else {
tempAudio.pause();
}
}
</script>
<!--编解码工具-->
<!--每个浏览器支持的视频格式可能会有区别，可以用编解码工具转换成需要的格式-->
<!--FFmpeg 官网地址：www.ffmpeg.org 开源工具-->
<!--Mac终端-->
<!--cd ffmpeg路径-->
<!--./ffmpeg--><!--查看是否可以执行-->
<!--cd 工作目录--><!--存储mp4的目录-->
<!--ffmpeg路径 -i x.mp4 -acodec libvorbis y.ogg-->
<!--视频播放-->
<!--Video(视频） HTML5提供了展示视频的标准-->
<!--control(控制器) 属性提供播放、暂停和音量控件-->
<!--<video> 定义-->
<!--<source> 多媒体资源，可以是多个-->
<!--属性：-->
<!--width 宽-->
<!--height 高-->
<br/>
<!--系统样式的视频播放器-->
<video src="video/NineMuses_Drama.mkv" controls="controls">不支持视频格式</video>
<!--自定义样式-->
<br/>
<video id="videoID">
<source src="video/NineMuses_Drama.mkv">
<source src="video/NineMuses_Drama.ogg">
不支持视频格式</video>
<br/>
<button onclick="playPause()">播放/暂停</button>
<button onclick="zoomInAction()">放大</button>
<button onclick="zoomOutAction()">缩小</button>
<script>
var tempVideo = document.getElementById("videoID");
function playPause () {
if (tempVideo.paused) {
tempVideo.play();
} else {
tempVideo.pause();
}
}
function zoomInAction () {
tempVideo.width = 1000;
tempVideo.height = 800;
}
function zoomOutAction () {
tempVideo.width = 500;
tempVideo.height = 400;
}
</script>
</body>
</html>示意图：
