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="data:image/course/play.png" /><span>早期基督美术建筑</span></li><hr /><li><img src="data:image/course/play.png" /><span>早期基督美术之绘画</span></li><!--水平线--><hr /><li><img src="data:image/course/play.png" /><span>早期基督美术之绘画：拜占庭美术</span></li><!--水平线--><hr /><li><img src="data:image/course/play.png" /><span>早期基督美术之绘画：镶嵌画</span></li><!--水平线--><hr /><li><img src="data: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

html视频播放器（video）相关推荐

免费视频播放器Video.js介绍
原文地址:http://www.cnblogs.com/afrog/p/6689179.html Video.js是一款web视频播放器,支持html5和flash两种播放方式.更多关于video.j ...
html5视频播放器video player 选择
为什么80%的码农都做不了架构师?>>> 网上能找到的好的支持html5的视频播放器非常有限,研究了几个还可以的,发现都有这样或者那样的问题,不是不给源代码,就是不支持全屏播放,要么 ...
开源视频播放器Video.js介绍
原文地址:http://www.cnblogs.com/afrog/p/4115377.html 最近项目中的视频功能,需要做到浏览器全兼容,所以之前用html5实现的视频功能就需要进行改造了.在网上 ...
微信小程序开发之视频播放器 Video 弹幕弹幕颜色自定义
把录音的模块尝试过之后就想着微信小程序的视频播放会不会更有趣? 果然,微信小程序视频自带弹幕.是不是很爽,跟我一起来看看. 微信小程序开发之录音机音频播放动画 (真机可用) 先上gif: 再上几张 ...
H5研究一:定制一个最简单的H5 视频播放器video/video
本文介绍使用video标签完成视频播放的播放器包含暂停.播放循环播放更改尺寸 Demo地址戳我,解压缩后直接点击.html文件即可看到效果,我用的是Chrome浏览器 > 效果如下: 编辑 ...
HTML5视频播放器video和音频播放器audio属性，事件，案例
HTML 音频/视频方法方法描述 addTextTrack() 向音频/视频添加新的文本轨道. canPlayType() 检测浏览器是否能播放指定的音频/视频类型. load() 重新加载音频 ...
VR视频播放器Video Player
一.通过blender进行建模 1.下载并进行安装快捷键: ①A:全选 ②X:把场景中所有的组件都删掉,按下X后点击Delete X ,则场景会被清空 ③Shift+A:生成一个物体或 ...
微信小程序使用视频播放器video组件
在app.json中配置好页面路由和权限. 1.app.json {"pages":["pages/video/video" ], "permissi ...
video标签学习 xgplayer视频播放器分段播放mp4
文章目录学习链接目标 video标签自带视频和制作的视频区别 video标签的src属性本地视频文件前端代码播放效果服务器视频文件示例1 后端代码前端代码播放效果示例2 后端代码 ...
与众不同 windows phone (14) - Media（媒体）之音频播放器, 视频播放器, 与 Windows Phone 的音乐和视频中心集成...
原文:与众不同 windows phone (14) - Media(媒体)之音频播放器, 视频播放器, 与 Windows Phone 的音乐和视频中心集成 [索引页] [源码下载] 与众不同 wi ...

html视频播放器（video）

1.视频标准

2.视频属性

html视频播放器（video）相关推荐

最新文章

热门文章