html5 video标签嵌入视频

标签: html5 视频
691人阅读 评论(0) 收藏 举报
分类:

 前面谈到了网页怎么嵌入flash视频,就想到了另一个问题,flash格式视频在手机上播放,需要手机安装flash播放插件,而且flash视频绝对无法在苹果手机上播放,因为苹果对flash的不支持,导致现在flash前景堪忧。当然目前已经有些插件可以支持苹果手机播放flash视频。

  这里就要谈一谈html5的video标签了。html5功能的强大是毋庸置疑的,而且作为一款为苹果量身定做的前端技术,现在html5对各浏览器的支持也越来越好,在手机端的支持也是让我觉得没有什么可以相比的。

在html5中嵌入视频非常简单,仅仅只需要如下代码就可以实现了:

<video id="media" width="720" height="400" controls> 
  <source src="http://minkbooks.com/content/trailer.mp4">
   <source src="http://minkbooks.com/content/trailer.ogg">
  </video>

html5标签的属性:

  • autoplay autoplay 如果出现该属性,则视频在就绪后马上播放。
  • controls controls 如果出现该属性,则向用户显示控件,比如播放按钮。
  • height pixels 设置视频播放器的高度。
  • loop loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
  • muted muted 规定视频的音频输出应该被静音。
  • poster URL 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
  • preload preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
  • src url 要播放的视频的 URL。
  • width pixels 设置视频播放器的宽度。

当然,如果想要很漂亮的播放外观呢?那么就可以用html5播放器了,目前有很多html5播放器,比如http://www.cnblogs.com/lhb25/archive/2011/06/27/7-great-html-5-video-player-scripts.html
本人觉得videojs是一个很不错的选择,下面就介绍下这个播放器的使用。
第一步:在官网下载video.js和video-js.css以及video-js.swf
第二步:在head标签引入
[html] view plain copy
  1.  <!--video.js html5视频播放器-->  
  2.   <link rel="stylesheet" type="text/css" href="assets/lib/css/video-js.css">  
  3. <script src="assets/lib/js/jquery.js"></script>  
  4. t;script src="assets/lib/js/movive/video.js"></script>  
  5.   
  6.   <!--IE低版本支持-->  
  7. t;script src="assets/lib/js/movive/html5media.js"></script>   
可以看到有一个html5media.js的类库,这个类库是对IE低版本的支持,大家都知道,IE对html5的支持不太好,这个看项目需求可以加入。直接网上就可以下载。
第三步:body里加入video标签

[html] view plain copy
  1. <video id="Html5Video" class="video-js vjs-default-skin" preload controls autoplay  width="100%"  
  2.         poster="assets/images/movie/poster.jpg">   
  3.             <source id="src1" src="assets/movie/video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />  
  4.             <source id="src2" src="assets/movie/zhiyan.ogv" type='video/ogg; codecs="theora, vorbis"' />  
  5.             <source id="src3" src="assets/movie/linyoujia.webm" type='video/webm; codecs="vp8, vorbis"' />  
  6.      您的浏览器不支持 video 标签。  
  7.  </video>  
html5支持三种格式的视频:mp4,ogv,和webm。首先要准备一个 mp4 格式的视频(h264),可以在苹果设备中使用;其次要准备 ogv 格式的视频,用在火狐浏览器中;最后要准备一下 webm 格式的视频,这个可以用在谷歌浏览器等。这样就确保支持几乎所有的主流浏览器了。
在这里还要多说一点,可能是技术发展的原因,各种浏览器对这三种格式的支持没有那么绝对了,比如:mp4格式的视频,在谷歌,搜狗,火狐,手机端等都可以正常播放,其他两种格式大致也是这种情况。而且,video标签对视频格式的支持好像也没有那么绝对了,至少我放入wmv,avi格式的视频也是可以播放的,感兴趣的同学可以试试啦,这里我就不多讲了。
在这里要重点强调的一点是视频的准备,我们准备mp4,ogv,webm格式的视频,可能会遇见明明是mp4格式的视频,为什么不能播放呢?而且用一些转码软件转码视频给mp4,ogv,webm格式的视频也是无法播放,这里可能是转码的问题,比如:mp4要求是h246,可是按照要求转码后,可能还是无法播放。这里给各位大侠推荐一款视频转换软件,专门为html5量身定做的:Freemake Video Converter。直接转码为html5视频,就会转换给MP4,ogv.webm三种格式的视频,并且会生成相应的代码。
第四步:js
[html] view plain copy
  1. <script> _V_.options.flash.swf = "assets/lib/js/movive/video-js.swf";</script>  

加入这段代码,就可以在不支持的浏览器自动切换为flash播放。

最后,在服务器部署后,会发现视频可能无法播放,这是因为IIS里我们没有配置mime类型的支持,把mp4,ogv,webm这三种格式的支持都配置好了,视频就可以正常播放了。微笑至于如何配置,百度搜索一下就知道了,有很多的,而且最好配置的文件类型要符合相应的格式,但我试了一下,发觉文件类型没有什么影响...如果配置后,还是无法播放,那么可能就是文件类型不对,具体看情况而定吧。
查看评论

UML参考手册 第二部分 基 本 概 念 第4章 静 态 视 图

UML参考手册  第二部分 基 本 概 念  第4章 静 态 视 图4.1 概述  静态视图是UML的基础。模型中静态视图的元素是应用中有意义的概念,这些概念包括真实世界中的概念、抽象的概念、实现方面...
  • CandyCat
  • CandyCat
  • 2001-05-26 22:58:00
  • 1403

HTML5—视频插入—video元素的属性、事件与方法

HTML5中video元素的属性、事件与方法
  • Jeason_liu
  • Jeason_liu
  • 2015-10-14 23:46:26
  • 4514

html5 页面嵌入视频

spring 如果遇到:html5 video播放视屏...
  • zmm0420
  • zmm0420
  • 2016-03-09 17:19:11
  • 3198

html5中插入视频

如需在 HTML5 中显示视频,您所有需要的是:   与 之间插入的内容是供不支持 video 元素的浏览器显示的: 您的浏览器不支持这个视频的显示 请更换到更高...
  • wanghua446
  • wanghua446
  • 2015-03-13 10:32:09
  • 624

html5 添加视频

  • 2013年05月11日 22:55
  • 595KB
  • 下载

HTML5中video标签的小技巧

1. 低版本webview中事件不触发的问题 2.隐藏视频中的controls 3.低版本webview中封面不显示的问题...
  • attributer
  • attributer
  • 2016-11-20 20:58:25
  • 2496

浅谈html5 video标签嵌入视频

前面谈到了网页怎么嵌入flash视频,就想到了另一个问题,flash格式视频在手机上播放,需要手机安装flash播放插件,而且flash视频绝对无法在苹果手机上播放,因为苹果对flash的不支持,导致...
  • sundasheng44
  • sundasheng44
  • 2015-05-18 16:01:26
  • 12332

html中插入wmv格式视频文件的代码

1.avi格式 2.mpg格式 3.rm格式 4.wmv...
  • slqgenius
  • slqgenius
  • 2017-01-06 13:04:50
  • 3807

支持wmv、mpg、mov、avi格式的网页视频播放代码

这2天一直在整金网奖的相关项目,比较头大的就是网页视频播放了,需要考虑各种不同格式的视频,然后找相应的视频播放器。这次使用了2种方法对这些视频进行处理:1、使用ckplayer网页视频播放器ckpla...
  • zenson_g
  • zenson_g
  • 2015-11-15 19:42:30
  • 23082

怎么在网页中播放视频之一:HTML5视频嵌入

转载自:http://jingyan.baidu.com/article/c1a3101ea983acde656deb0b.html 在网页中使用HTML5视频嵌入技术最大的优点就是...
  • wang544831183
  • wang544831183
  • 2017-08-10 11:33:46
  • 1405
    个人资料
    持之以恒
    等级:
    访问量: 2万+
    积分: 819
    排名: 6万+