本文详细介绍了HTML5中的视频和音频元素，包括基本语法、应用实例以及如何创建自定义视频播放器。通过视频元素的control、autoplay、loop、poster、preload等属性，以及音频元素的相似应用，展示了HTML5在多媒体播放方面的强大功能。最后，探讨了自定义播放器所需的属性和方法，为实现个性化视频体验提供了指导。
目录
一、视频元素
Web上的视频播放从来没有一个固定的标准，多数视频都是通过像Flash这样的插件来播放的，不同的浏览器往往拥有不同的插件。HTML5中的video元素是现在播放视频的一种标准方法。
1.视频元素的基本语法
HTML5中的video元素是用来播放视频文件的，支持Ogg、MPEG4、WebM等视频格式，用法如下：
<video src="./sp1.mp4" ></video>
id="D2hcBmon-1683711119705" src="https://live.csdn.net/v/embed/295073" allowfullscreen="true" data-mediaembed="csdn">
视频1
2.视频元素的应用
①control给视频添加控制条。
<video src="./sp1.mp4" controls></video><video controls>
<source src="./sp1.mp4">
</video
②autoplay表示音频或视频能在页面加载时自动播放，不需要用户控制播放。
<video src="./sp1.mp4" controls autoplay></video>
<video controls autoplay>
<source src="./sp1.mp4" />
</video>③loop属性表示音频或视频可以循环播放。
<video src="./sp1.mp4" controls autoplay loop></video><video controls autoplay loop>
<source src="./sp1.mp4" />
</video>④poster属性设置视频播放前的封面图片。
<video src="./sp1.mp4" controls autoplay loop poster="./tp1.jpg"></video>
<video controls autoplay loop poster="./tp1.jpg">
<source src="./sp1.mp4" />
</video>
⑤preload属性规定是否在页面加载后再载入视频。
none：用户不需要对视频进行预先加载，这样可以减少网络流量。
metadata：告诉服务端，用户不想马上加载视频，但需要预先获得视频的元数据信息（例如文件的大小、时长等），视频网站上的视频文件在加载的时都会有时长显示，这可以这可以通过设置metadata属性值来设置。
auto：表示视频要实时播放，需要服务器向用户计算机连续、实时传送。通常在预先播放前要预先下载一段资料作为缓冲，用户不必等到整个文件下载完毕，而只需经过几秒或十几秒的启动延时即可观看。当视频在用户计算机播放时，文件的剩余部分将在后台服务器中继续下载。
在使用video标签时，默认将preload的加载属性设置为auto，因此要设置另外的属性值必须在设置src前。
⑥width和height用于设置视频的宽高。
<video src="./sp1.mp4" width="400px" height="250px" preload="auto" controls loop autoplay></video>
视频元素属性：
| 属性 | 说明 |
| src | 要播放的视频的URL |
| control | 向用户系统显示控件，比如播放按钮 |
| autoplay | 视频就绪后马上播放 |
| loop | 当媒体文件完成播放后再次开始播放 |
| preload | 视频在页面加载完时就开始加载，并开始预备播放，如果使用autoplay，则该属性忽略 |
| poster | 规定视频正在加载时显示的图像，直到用户单击播放按钮 |
| width | 设置视频播放器的宽度 |
| height | 设置视频播放器的高度 |
二、音频元素
1.音频元素的基本语法
HTML5中的audio元素是用来播放音频文件的，支持Ogg、MP3、MAV等音频格式。
<audio src="./LBI利比 - 暗淡.ogg" controls="controls"></audio>src属性用于指定要播放的音频文件路径，control属性用于提供播放、暂停和音量控件，也可以包含宽度和高度。
2.音频元素的应用
<audio controls>
<source src="./LBI利比 - 暗淡.ogg" />
</audio>视频元素和音频元素的语法及使用都一样，source元素用来连接到不同的音频文件。
音频元素属性：
| 属性 | 说明 |
| src | 规定音频文件的URL |
| control | 向用户显示音频控件（比如播放、暂停按钮） |
| loop | 当音频结束时重新开始播放 |
| autoplay | 音频就绪后马上播放 |
| muted | 音频输出为静音 |
| preload | 当网页加载时，音频是否默认被加载以及如何被加载 |
三、自定义视频播放器
系统定义的播放器样式比较单一，个性化不明显，不能体现网站的特点，因此在网站中需要制作自定义的播放器。
1.自定义视频播放器需要的属性和方法
| 属性 | 说明 |
| controls | 显示或隐藏用户控制界面 |
| autoplay | 媒体是否自动播放 |
| loop | 媒体是否循环播放 |
| paused | 媒体是否暂停（只读属性） |
| ended | 媒体是否播放完毕（只读属性） |
| currentTime | 当前播放进度 |
| duration | 媒体播放总时间（只读属性） |
| volume | 0.0到1.0的音量相对值 |
| muted | 是否静音 |
| 方法 | 说明 |
| play（） | 媒体播放 |
| Pause（） | 媒体暂停 |
| Timeupdata（） | 时间更新 |
| Canplay（） | 可以播放 |
2.自定义视频播放器的制作步骤
①使用视频播放元素。
②设置视频播放/暂停按钮。
③添加视频进度条。
④显示视频当前播放的时间和总时间。
⑤设置全屏按钮。
<style>
.my-player {
width: 800px;
height: 635px;
margin: 50px auto;
background-color: #000;
position: relative;
}
.controls {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 35px;
background: linear-gradient(#eee, #fff, #eee);
}
.controls > div {
float: left;
}
.controls > div.btn-play {
width: 35px;
height: 35px;
background: url(https://blog.csdn.net/sprite.png) no-repeat;
margin-right: 10px;
cursor: pointer;
}
.controls > div.btn-play.pause {
background-position-x: -40px;
}
.controls > div.progress,
.controls > div.volume {
width: 400px;
height: 10px;
background-color: #666;
margin-top: 12px;
border-radius: 5px;
margin-right: 10px;
cursor: pointer;
}
.controls > div.progress .progress-inner,
.controls > div.volume .volume-inner {
background: url(https://blog.csdn.net/play-bar.png);
width: 0;
height: 10px;
position: relative;
border-radius: 5px;
}
.controls > div.progress .progress-inner span,
.controls > div.volume .volume-inner span {
display: block;
position: absolute;
right: -8px;
top: -3px;
background: url(https://blog.csdn.net/handle.png);
width: 16px;
height: 16px;
}
.controls > div.time {
font-size: 12px;
margin-top: 8px;
margin-right: 20px;
}
.controls > div.volume {
width: 200px;
}
.controls > div.full-screen {
width: 35px;
height: 35px;
background: url(https://blog.csdn.net/sprite.png) no-repeat -150px 0;
cursor: pointer;
}
</style>
<body>
<div class="my-player">
<!-- 自定义视频播放器 -->
<video src="./sp2.mp4" width="800" height="600"></video>
<!-- 自定义视频播放器导航栏效果 -->
<div class="controls">
<!-- 播放、暂停效果 -->
<div class="btn-play"></div>
<!-- 播放器进度条效果 -->
<div class="progress">
<div class="progress-inner"><span></span></div>
</div>
<!-- 时间进度条 -->
<div class="time">
<span class="current-time">00:00</span>
/
<span class="total-time">00:17</span>
</div>
<!-- 音量调整效果 -->
<div class="volume">
<div class="volume-inner"><span></span></div>
</div>
<!-- 全屏效果 -->
<div class="full-screen"></div>
</div>
</div>
</body>
// 实现播放功能，获取基本元素
var video = document.querySelector(".my-player video"); //获取视频
var btnPlay = document.querySelector(".btn-play"); //获取播放按钮
var playing = false;
video.addEventListener("canplay", function () {
video.volume = 0.5;
document.querySelector(".volume-inner").style.width = "50%";
// 显示视频总时长
document.querySelector(".total-time").innerHTML = toMS(video.duration);
// 播放/暂停按钮
btnPlay.addEventListener("click", function () {
if (playing) {
video.pause();
playing = false;
this.classList.remove("pause");
} else {
video.play();
playing = true;
this.classList.add("pause");
}
});
// 更新当前播放时间和进度条
video.addEventListener("timeupdate", function () {
document.querySelector(".current-time").innerHTML = toMS(video.currentTime);
document.querySelector(".progress-inner").style.width = (video.currentTime / video.duration) * 100 + "%";
});
// 单击播放进度条改变播放进度
document.querySelector(".progress").addEventListener("click", function (e) {
var x = e.offsetX;
var w = this.offsetWidth;
var rate = x / w;
document.querySelector(".progress-inner").style.width = rate * 100 + "%";
video.currentTime = rate * video.duration;
});
// 单击音量进度条改变音量大小
document.querySelector(".volume").addEventListener("click", function (e) {
var x = e.offsetX;
var w = this.offsetWidth;
var rate = x / w;
document.querySelector(".volume-inner").style.width = rate * 100 + "%";
video.volume = rate;
});
// 全屏按钮
document.querySelector(".full-screen").addEventListener("click", function () {
video.webkitRequestFullScreen();
});
});
// 构建函数toMs（），实现时间格式转换
function toMS(sec) {
var minutes = Math.floor(sec / 60);
minutes = minutes < 10 ? "0" + minutes : minutes;
var seconds = Math.floor(sec % 60);
seconds = seconds < 10 ? "0" + seconds : seconds;
return minutes + ":" + seconds;
}
扫一扫
1410
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
