扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
在HTML5中，新增了两个元素——video元素与audio元素，其中video元素专门用来播放网络上的视频或电影，而audio元素专门用来播放网络上的音频数据。使用这两个元素，就不需要再使用其他插件了，只要使用支持HTML5的浏览器就可以了，同时在开发的时候也不再需要书写复杂的object元素和embed元素了。希望帮到你，满意请采纳
10多年的金湖网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。全网整合营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整金湖建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联从事“金湖网站设计”,“金湖网站推广”以来，每个客户项目都认真落实执行。
video 标签定义视频，比如电影片段或其他视频流。
video 标签是 HTML 5 的新标签。
具体用法和参数详见
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是影片标签，可以在浏览器中很容易的插入影片，还能够设定影片长、宽、增加影片播放控制列、是否自动播放、是否自动重覆播放等功能，虽然使用HTML5 video影片标签来播放影片相当的容易，但现阶段要考虑浏览器的支援情形，例如IE 9才开始支援HTML5 video标签，其他主流的浏览器如Firefox、Chrome、Opera、Safari都有支援，但影片格式也有所差异，后方介绍。
HTML5 video影片标签语法
video src="影片连结" controls/video
HTML 5 video标签里的src是最重要的属性，影片连结就放在src=的右方引号内，另外可以加入几个控制选项属性，例如加入controls会出现控制功能列、加入width可以设定影片宽度、加入height可以控制影片高度、加入loop可以重覆播放、加入autoplay可以在影片准备好时自动播放、加入preload会在网页载入时就准备播放，不过如果同时使用autoplay与preload，会以autoplay属性为主。
浏览器对HTML5 video影片标签以及影片格式的支援
HTML 5目前所支援的影片格式有三种，分别为ogg、mpeg 4、WebM，这么多种格式不知道要怎么选择也没关系，video标签有支援多重影片功能，也就是说，可以将同一个影片，准备三种不同的格式，当网友用不同的浏览器开启时，video标签会自动根据当时的浏览器，播放适合该浏览器所支援的影片格式，这样就解决不知道该用哪种格式的问题了，但像是IE 7、IE 8等较旧的浏览器，本身并不支援video标签，所以依然无法顺利播放影片，以下准备了一张表格，提供给各位参考。
这张表上的浏览器支援影片格式可能随着浏览器的进化而有所改变，建议在使用影片格式同时，多测试当时的各家浏览器支援情况，目前看来Opera与IE的支援格式刚好相反，Safari与IE的支援格式刚好相同，而Chrome则是所有格式都支援，Google果然是HTML 5支持者。虽然有三种格式可以选择，但其实仔细看，不难发现，准备ogg与mp4两种格式，就可以满足大部分的浏览器了。
可以实现播放，这是我们的测试代码
video width="500px" height="500px" controls="controls" autoplay="autoplay"
source src="1.mp4" type="video/ogg" /
/video
效果图：
1.Flash：YouTube上的FLV影片得通过一个SWF（Shockwave Flash）播放器播放，而这个播放器会呼叫Flash Player Plug-In来播放影片。 \x0d\x0a\x0d\x0a2.HTML5：YouTube上的M4V影片直接利用标签即可播放，而播放器是以JavaScript写成，一切都以浏览器内建功能完成.\x0d\x0a稳定性 \x0d\x0a\x0d\x0a Flash Player最大的问题就是容易宕，各位读者们在玩游戏、看影片时遇过Flash Player出问题的经验。早先Flash Player一当，就会让浏览器一起挂掉。于是Google Chrome一推出时，就强调每个程序都是分离的，如此一来浏览器就不会跟随一起挂掉。随后Mac OS X 10.6的Safari也加入这功能，Firefox 3.6.4版也会加入。 \x0d\x0a\x0d\x0a 然而，这样的功能仅是避免浏览器与Flash Player陪葬，要是Flash Player的稳定性不改进的话，问题还是没解决。而HTML5利用标签和JavaScript来播放影片，不需任何外挂就能达成，是相对稳定许多的。 \x0d\x0a\x0d\x0a 流畅度 \x0d\x0a\x0d\x0a 当网络影片从480p，逐渐支持到720p与1080p时，光是播放影片就要耗用相当多的CPU计算资源。桌面计算机有时播放都相当吃力，更别提CULV笔记本以及使用ATOM的小笔电了。于是Flash Player 10.1版中加入了硬件译码支持，利用GPU加速来降低CPU资源的耗用。之前也有实际测试数据比较Flash与HTML5谁比较吃资源，显示出，不管哪一种技术，硬件加速是降低CPU耗用的唯一解决方法。 \x0d\x0a\x0d\x0a Flash Player除了稳定性问题，支持跨平台（不包括Linux）、跨浏览器硬件译码是比HTML5具有优势。而HTML5最大的问题在于浏览器内建编码不统一。
【方法步骤】：
首先下载video.js，百度一下就能找到；
这个是下载后的目录；
先把要用到的js\css\swf都加载到html页面上。如：
link href="video-js/video-js.css" rel="stylesheet" type="text/css"
script src="video-js/video.js"/script
script
videojs.options.flash.swf = "video-js/video-js.swf";
/script
加入下面的代码：
video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto"width="640"height="480"poster="video-js/my_video_poster.png" data-setup="{}" source src="Wildlife.mp4" type='video/mp4' /video
只要记住：修改width="640" height="480"来改变视频显示大小，修改src="Wildlife.mp4"来改变要显示的视频；
然后打开html文件查看效果吧，它有暂停、音量控制、全屏等功能，还有好多其他功能，比如字幕等，这个以后再写。
【注意事项】：
如果是IE浏览器就将视频替换为传统的以FLASH形式播放；
解决IE不能播放的问题很简单。加入：scriptif (navigator.userAgent.indexOf('MSIE') = 0){ document.getElementById("videoDiv").innerHTML='embed src="Wildlife.mp4" autostart="true" loop="true" width="640" height="480" '; } /script；
在信息量越来越大的今天，越来越多的网站重视数据信息的多样化与个性化，随着多媒体技术逐渐发展提高，在线展示视频、音频、PPT、图表等技术也越来越多地应用到了各行各业中，无论是企业还是个人，都在改变着自己的网站风格。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网