html视频播放器(video)
视频解码器 H.264 Throra VP8
音频解码器 AAC MP3 Ogg
1.视频标准
video 不支持 IE8及以下版本浏览器,支持三种视频格式:MP4,WebM 和 Ogg
相关属性和音频猜不多,不重复 https://blog.csdn.net/weixin_44797182/article/details/99685567、
当然还有一些不同的。如下
2.视频属性
2.1、 禁止下载
<video src="test.mp4" controls controlslist="nodownload" width="400" height="300"></video>
2.2、 自动播放 (不同浏览器的表现不一样)
<video src="test.mp4" controls autoplay width="400" height="300"></video>
2.3、 循环播放
<video src="test.mp4" controls loop width="400" height="300"></video>
2.4、预加载
<video src="test.mp4" controls preload width="400" height="300"></video>
2.5、音量控制
<video src="test.mp4" poster="poster.jpg" controls width="400" height="300" id="_volume"></video>
<script>
var video = document.getElementById('_volume')
video.volume = 2 // 取值范围:0 到 1,0 是静音,0.5 是一半的音量,1 是最大音量(默认值)
</script>
2.6、 播放时间控制
<video src="test.mp4" poster="poster.jpg" controls width="400" height="300" id="time"></video>
<script>
var video = document.getElementById('time')
console.log(video.currentTime) // 视频当前正在播放的时间(单位:s),进度条拖到哪就显示当前的时间
video.currentTime = 60 // 默认从60秒处开始播放
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在线课程学习</title>
<link rel="stylesheet" href="css/course.css">
</head>
<body>
<div id="course">
<!--创建视频播放窗口-->
<video id="screen" width="640" src="video/art.mp4" controls autoplay>
对不起,您的浏览器不支持HTML5视频。
</video>
<!--课程大纲列表-->
<ul>
<li>
<!--课程标题-->
<h3>欧洲简史</h3>
</li>
<!--水平线-->
<hr />
<li>
<img src="image/course/play.png" />
<span>早期基督美术建筑</span>
</li>
<hr />
<li>
<img src="image/course/play.png" />
<span>早期基督美术之绘画</span>
</li>
<!--水平线-->
<hr />
<li>
<img src="image/course/play.png" />
<span>早期基督美术之绘画:拜占庭美术</span>
</li>
<!--水平线-->
<hr />
<li>
<img src="image/course/play.png" />
<span>早期基督美术之绘画:镶嵌画</span>
</li>
<!--水平线-->
<hr />
<li>
<img src="image/course/play.png" />
<span>早期基督美术之绘画:罗马式美术</span>
</li>
</ul>
</div>
<script>
//获取video对象
var screen = document.getElementById("screen");
var oLi = document.getElementsByTagName("li");
//跳转播放时间
function playCourse(time) {
//重置当前播放时间
screen.currentTime = time;
//继续播放视频
screen.play();
}
console.log(oLi)
for (var i = 0; i < oLi.length; i++) {
oLi[i].index = i;
oLi[i].onclick = function() {
for (i = 0; i < oLi.length; i++) {
switch (this.index) {
case 1:
playCourse(60);
break;
case 2:
playCourse(120);
break;
case 3:
playCourse(220);
break;
case 4:
playCourse(320);
break;
case 5:
playCourse(420);
break;
/* 除此之外 */
default:
playCourse(0)
}
}
}
}
</script>
</body>
</html>
详细内容https://www.cnblogs.com/rogerwu/p/10072119.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库