189 8069 5689
!DOCTYPE HTML
网站建设哪家好，找创新互联！专注于网页设计、网站建设、微信开发、成都微信小程序、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了临洮免费建站欢迎大家使用！
html
body
video width="320" height="240" controls="controls"
source src="movie.ogg" type="video/ogg"
source src="movie.mp4" type="video/mp4"
Your browser does not support the video tag.
/video
/body
/html
把.ogg，mp4的地址换成你自己的就可以了，亲
使用文本编辑编辑html5，然后用Mac自带浏览器运行html5，Mac电脑自带方便快捷，缺点是复杂的html5布局会混乱。
复杂的html5可以在Mac上下载专门的web工具，下载相应的软件进行html5开发，如VSCode以.html结尾的文件可以使用文本编辑打开，也可以使用Mac自带浏览器直接打开
HTML5支持的视频格式在HTML5中嵌入的视频格式主要包括ogg、mpeg4、wehm等。
具体介绍如下：
ogg：一种开源的视频封装容器，其视频文件扩展名为ogg，里面可以封装vobris音频编码或者theora视频编码，同时ogg文件也能将音频编码和视频编码进行混合封装。
mpeg4：目前最流行的视频格式，其视频文件扩展名为mp4。
同等条件下，mpeg4格式的视频质量较好，但它的专利被MPEG－LA公司控制，任何支持播放mpeg4视频的设备，都必须有一张MPEG－LA颁发的许可证。
扩展资料：
1、视频格式是视频播放软件为了能够播放视频文件而赋予视频文件的一种识别符号。
2、3GP是一种3G流媒体的视频编码格式，主要是为了配合3G网络的高传输速度而开发的，也是目前手机中最为常见的一种视频格式。
3、MPEG（运动图像专家组）是Motion Picture Experts Group 的缩写，这类格式包括了MPEG－1，MPEG－2和MPEG－4在内的多种视频格式。
4、AVI，音频视频交错（Audio Video Interleaved）的英文缩写，AVI这个由微软公司发布的视频格式，在视频领域可以说是最悠久的格式之一。
5、一种独立于编码方式的在Internet上实时传播多媒体的技术标准，Microsoft公司希望用其取代QuickTime之类的技术标准以及WAV、AVI之类的文件扩展名。
我们使用html5的video标签，可以不依赖于任何第三方的插件或控件，直接在浏览器中实现视频播放功能。
在了解了video标签之后，下面我们就使用html5的video标签来实现视频播放。
现在，我们打开浏览器，看一看具体的效果：
为了更好地兼容各种浏览器，你可以为一个video标签添加多个source子标签，每个source标签引用一个不同格式的视频文件。这样，html5浏览器会自动在这些source标签中从上到下依次寻找并识别出该浏览器可以播放的第一个视频文件并进行播放，从而实现兼容多个浏览器的视频播放功能。
注：html5的video标签目前只支持播放.mp4、.ogg、.webm等几种格式的视频文件，暂不支持其他格式的视频文件。此外，不同的html5浏览器支持的视频文件格式也略有不同，这种状况可能会在未来的html5中得以改善。
1、video src="hangge.mp4" controls/video1
2，通过width和height设置视频窗口大小
video src="hangge.mp4" controls width="400" height="300"/video1
3，预加载媒体文件
设置preload不同的属性值，可以告诉浏览器应该怎样加载一个媒体文件：
（1）值为auto：让浏览器自动下载整个文件
（2）值为none：让浏览器不必预先下载文件
（3）值为metadata：让浏览器先获取视频文件开头的数据块，从而足以确定一些基本信息（比如视频的总时长，第一帧图像等）
!-- 用户点击播放才开始下载 --video src="hangge.mp4" controls preload="none"/video12
4，自动播放
（1）使用autoplay属性可以让浏览器加载完视频文件后立即播放。
video src="hangge.mp4" controls autoplay/video1
（2）如果启用自动播放，可以将播放器设置为muted状态。这样自动播放时会静音，防止用户厌烦。用户需要的话可以点击播放器扬声器图标重新打开声音。
video src="hangge.mp4" controls autoplay muted/video1
5，循环播放
使用loop属性让视频播放结束时，再从头开始播放。
video src="hangge.mp4" controls loop/video1
6，设置替换视频的图片（封面图片）
通过poster属性可以设置，浏览器在下面三种情况下会使用这个图片：
（1）视频第一帧未加载完毕
（2）把preload属性设置为none
（3）没有找到指定的视频文件
video src="hangge.mp4" controls poster="hangge.png"/video1
7，浏览器兼容，如何让每一个浏览器都能顺利播放视频
现在大部分浏览器都能支持H.264格式的视频，但Opera浏览器却一直不支持。我们需要通过后备措施保证每个人都能看到视频，通常有下面几种方案：
（1）使用多种视频格式
video和audio元素有个内置的格式后备系统。我们不使用src属性，而是在其内部嵌套一组source元素，浏览器会选择播放第一个它所支持的文件。
我们可以添加WebM格式的视频提供对Opera的支持。
video controls
source src="hangge.mp4" type="video/mp4"
source src="hangge.webm" type="video/webm"
/video1234
（2）添加Flash后备措施（推荐）
上面那个方法不推荐，应为Opera浏览器只占不到1%的份额。特意为它把视频都转码一边太费事。使用Flash作为备用播放方案还是很方便的，同时Flash还能兼容IE8这种连video元素都不支持的老浏览器。
这里使用Flowplayer Flash作为备用播放器（本地下载 ：flowplayer-3.2.18.zip）
video controls
source src="hangge.mp4" type="video/mp4"
source src="hangge.webm" type="video/webm"
object id="flowplayer" width="400" height="300"
data="flowplayer-3.2.18.swf"
type="application/x-shockwave-flash"
param name="movie" value="flowplayer-3.2.18.swf"
param name="flashvars" value='config={"clip":"hangge.mp4"}'
/object
/video1234567891011
（3）也有人优先使用Flash，而HTML5作为后备措施。
这么做是因为Flash普及率比较高，而HTML5作为后备可以扩展iPad和iPhone用户
object id="flowplayer" width="400" height="300" data="flowplayer-3.2.18.swf" type="application/x-shockwave-flash"
param name="movie" value="flowplayer-3.2.18.swf"
param name="flashvars" value='config={"clip":"hangge.mp4"}'
video controls
source src="hangge.mp4" type="video/mp4"
source src="hangge.webm" type="video/webm"
/video
/object