video标签的使用方法(video标签控制)

html5 video标签的用法

HTML 5 video 标签

定义和用法

video 标签定义视频，比如电影片段或其他视频流。

提示和注释

提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。

属性

实例

!--?一段简单的?HTML5?视频：--

video?src="movie.ogg"?controls="controls"您的浏览器不支持?video?标签。/video

知识：H5中 标签的知识

video 允许你轻松地嵌入一段视频。一个简单的例子如下：

在标签中 的 source 可以指定多种类型的媒体内容。

像 MP3、MP4、WebM 这些 视频格式，定义了构成媒体文件的音频轨道和视频轨道的储存结构，其中还包含描述这个媒体文件的元数据，以及用于编码的编码译码器等等。

比如：一个格式为 WebM 的电影包含了

其中视频轨道包含一个主视频轨道和一个可选的 Angle 轨道；

音频轨道包含英语和西班牙语的音频轨道，还有一个英语评论的音频轨道；

文字轨道包含英语和西班牙语的字幕轨道，如下图所示：

音频和视频轨道以适合的格式保存。音频轨道和视频轨道使用不同的格式。

不同的浏览器支持不同的视频和音频格式, 例如:

一般来说，在页面里签入 video标签，结合一些播放器来使用。比如 等。

END

video标签的归纳

video标签的属性

src: 用于告诉video标签需要播放的视频地址

autoplay: 用于告诉video标签是否需要自动播放视频

controls: 用于告诉video标签是否需要显示控制条

poster: 用于告诉video标签视频没有播放之前显示的占位图片

loop: 一般用于做广告视频, 用于告诉video标签视频播放完毕之后是否需要循环播放

preload: 预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效

muted:静音

width/height: 和img标签中的一模一样

自己需要注意的是

在电脑中src即使找到了该文件也只是用11213才能打开，除非是在你设置格式之后才能直接以图片格式打开 如下

1.格式:

video

source src="" type=""/source

source src="" type=""/source

/video

2.第二种格式存在的意义:

由于视频数据非常非常的重要, 所以五大浏览器厂商都不愿意支持别人的视频格式, 所以导致了没有一种视频格式是所有浏览器都支持的

这个时候W3C为了解决这个问题, 所以推出了第二个video标签的格式

video标签的第二种格式存在的意义就是为了解决浏览器适配问题

video 元素支持三种视频格式, 我们可以把这三种格式都通过source标签指定给video标签, 那么以后当浏览器播放视频时它就会从这三种中选择一种自己支持的格式来播放

3.注意点:

3.1当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式, 但是想让所有浏览器都通过video标签播放视频还有一个前提条件, 就是浏览器必须支持HTML5标签, 否则同样无法播放

3.2在过去的一些浏览器是不支持HTML5标签的, 所以为了让过去的一些浏览器也能够通过video标签来播放视频, 那么我们以后可以通过一个JS的框架叫做html5media来实现

--

videojs在vue中的使用（自定义组件，如清晰度）

该方式使用以创建好的video标签，只是简单的改变video的src。注意，此时的自定义组件（如清晰度）并没有更新，里面的数据还是上一个视频的信息，需要手动更新，可以手动移除后再添加。

该方式首先会调用dispose方法销毁已经创建的video标签，并移除所有的组件和监听事件，然后需要自己创建video并设置其id（注意该id不能与之前销毁的id相同，我也不知道为啥～ :) ）和class以及src，然后将创建的video添加到文档中，如上html的结构，将作为id= vWrap的子元素添加到文档中。

一开始在项目中使用dplayer做为视频的播放库，但是由于在孤儿浏览器上出现兼容问题 ??，因此不得不放弃转为videojs，一路走来，踩了不少抗，主要是视频切换和自定义组件在切换视频时出的问题（样式的修改可以通过css覆盖生成的样式），这篇文章谨献给自己在这里所掉的头～??

五、标签的使用

video标签为html5新增标签。在广东互联网协会官网项目中，首页引入了一次此标签，使用了preload属性以及webkit-playsinline属性。首次使用video实践真实项目，所以我想根据w3school上对该标签的描述，对其进行一次使用方法的总结。

属性：

2、source标签

例如：

3、ios端不自动全屏播放

HTML5中video播放本地视频

1、新建一个html文件，命名为test.html，用于介绍如何使用video控制视频。

2、在test.html页面，使用button标签创建四个按钮，分别是播放/暂停、大、中、小，用于控制视频的播放效果。同时，使用video标签创建一个视频。

3、给每个按钮绑定onclick点击事件，当按钮被点击时，分别执行相应的函数来控制视频的播放效果。

4、使用document.getElementById()获得视频对象，创建“播放/暂停”的playPause()函数，使用play()方法控制视频的播放，使用pause()控制视频的暂停。

5、创建makeBig（）函数，当点击"大"按钮时，使视频以宽度560px来播放视频。

6、创建makeNormal()函数与makeSmall()函数，当点击“中”按钮时，使视频以宽度420px来播放视频，当点击“小”按钮时，使视频以宽度320px来播放视频。

7、在浏览器打开test.html文件，测试js控制视频播放的效果。