1、打开Hbuilder，在项目管理器中放置mp4格式视频点击index.html进入。
2、在这里通过红色方框中的命令来建立一个HTML5的文件。
3、这个时候添加video元素就可以插入视频了，用autoplay设置自动播放，controls设置控制栏。
4、用source可以连接对应的视频资源；
5、完成以后左边的是播放按钮、视频进度控制条等工具。
6、而右边可以调节声音大小和全屏播放，有服务器的话还可以下载。
html5为你的网页添加视频播放器在html5中通过video标签为网页添加视频播放功能。
video元素支持三种视频格式：ogg, mpeg4, webm
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
以下是video标签的相关属性。
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
heightpixels设置视频播放器的高度。
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src url 要播放的视频的 URL。
widthpixels 设置视频播放器的宽度。下面是一个小实例：
<!DOVTYPE html>
<html>
<head>
<title>我爱学习</title>
</head>
<body>
<video controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</video>
</body>
</html>
款很棒的 HTML5 视频播放器作为下一代的网页语言，HTML5 拥有很多让人期待已久的新特性，其中之一就是 video 标签，让开发者可以在网页中和添加图片一样简单的方式添加视频。1、VideoJSVideoJS 是最流行的 HTML5 视频播放器，免费、开源，可使用 CSS 轻松定制皮肤，支持全屏，在不支持的浏览器自动切换为 Flash 播放。2、SublimeVideoSublimeVideo 是一个独特的基于云概念的 HTML5 视频播放器，功能强大，可惜不是免费的。3、Open Standard Media (OSM) Player由 Alethia Inc 开发，是集全功能于一体的网络播放器，非常不错。4、Video for EverybodyVideo for Everybody 让你在网页中嵌入一小段代码就能支持 HTML5 视频，在不支持的浏览器中自动切换为 Flash 播放。5、Kaltura HTML5Kaltura 的 HTML5 视频解决方案 – 兼容所有主流浏览器，采用独特的 fallback 机制。6、FlareVideoFlareVideo 由 Alex MacCaw 开发，他是一位Ruby/JS开发者，FlareVideo主要特色：在不支持 HTML5 视频的情况，用Flash作为替代方案可轻松自定义主题支持全屏完全开源和免费用于商业用途7、Projekktor全文
