video详解(超全面精细讲解)

video标签

用来展示视频文件。目前支持三种视频格式： MP4, WebM, 和 Ogg；

如果你的网站因为文件原因无法由video标签播放内容，可以看一个这个帖子中提到的网站，里面有免费的转换器可以帮你转换你的文件类型。

可以免费转换文件的网站地址

使用方法：

<video id="myvideo" width="420">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    您的浏览器不支持 HTML5 video 标签。
  </video>

浏览器支持情况：

video视频常用的属性

src:用来指定视频的路径
controls:用来显示是否显示默认的视频面板
autoplay:页面加载时自动播放视频
loop:存在此属性则开启循环播放
preload:设定音频的预加载方式
=“auto”:自动加载，页面加载后载入整个视频文件
=“metadata”:自动加载，页面加载后只载入源数据
=“none”:不自动加载
poster:值是url路径，表示视频的封面图片路径

这里提示一下如果设置了proload="none"则代表poster的封面属性可能默认为你视频的第一帧

video的js方法

即在javascript中可以使用到的方法

var myvideo=document.getElementById("myvideo");
//播放音乐
myvideo.play();
//暂停音乐
myvideo.pause();

html视频/音频js可用

这里同样使用几个常用的

muted:设置或返回是否静音，可读可写
currentTime:设置或返回视频播放位置，可读可写
duration:查看本文件的总时长，单位是秒s,只读属性
src:返回或设置视频的路径

这里可能作者举例不全面，可以看一下上图中一定能找到你想要的

//将视频文件的位置定义到第十秒
document.getElement("myvideo").currentTime=10;

video的事件

这里还要说明一下,video标签可以直接设置宽高，例如

var myVideo=document.getElementById("myvideo");
// 原来宽是440px,这里width设置的值默认为Px为单位。
function makeBig()
{ 
	myVideo.width=560; 
} 

运行的话可以看见视频的宽改变了，同样设置高也能改变效果

说到<video/>标签，不得不提到一个标签<track/>

视频文件的字幕功能
用法：

    
<video controls width="320" height="240"
       src="/video/php/friday.mp4">
    <track default
           kind="captions"
           srclang="en"
           src="/video/php/friday.vtt" />
    抱歉，您的浏览器不支持嵌入视频！
</video>

这里有一个菜鸟教程的实例，大家可以点进去做一个看看效果
菜鸟教程视频带字幕实例
可以看见这个字幕功能也是非常的好用实用的。

同样这个标签也可以添加属性

default:
值：default;
描述：规定该轨道是默认的。如果用户没有选择任何轨道，则使用默认轨道。
kind:值： captions
值：chapters
值：descriptions
值：metadata
值：subtitles
描述：规定文本轨道的文本类型。
label:
值： text
描述：规定文本轨道的标签和标题。
src:
值：URL 必需的。
描述：规定轨道文件的 URL。
srclang:
值：language_code
描述：规定轨道文本数据的语言。
！！！如果 kind 属性值是 “subtitles”，则该属性是必需的。

这个标签支持html的全局属性

同样支持html的全局事件属性

好了，对于video的部分到这里就全部介绍完了。如果小伙伴有什么疑问或者问题探讨的话，欢迎在评论区讨论哦~

本文由作者整理原创，部分资料截图来源于菜鸟教程。