在博客上插入手机也可以看的视频

 2015-01-31 18:28

今天有一位朋友又给我出了一个难题:“怎么在响应式主题上插入一个视频,手机上也可以浏览啊?

面对这个问题,我思考了很久,理论上应该可以的。因为HTML5就是以移动设备为基础开发的语言程序,它的一些元素属性虽然在一些浏览器上不能完全支持,但运用的好的话,是可以同时在移动设备和PC上同时浏览视频文件的。

经过本人小小的测试,发现HTML5自带的video属性完成可以胜任,分享代码如下:

<div>
  <video controls="controls" poster="http://app.zblogcn.com/files/phptheme/BAndW/screenshot.png" width="100%" height="auto">
        <source src="http://minkbooks.com/content/trailer.mp4" type="video/mp4"/>
      <p>视频来自拍拍看科技 www.paipk.com</p> 
  </video>
</div>

简单说明下:

  • video属性:HTML5特有的元素,它是可以脱离播放器来单独控制视频的。所以我们运用这个代码的时候可能要考虑,在一些比较落后的浏览器上是无法运行的;

  • controls="controls":让用户有视频的开启/关闭播放权限;

  • poster="#":这是一个在视频开始播放前调用的图片,具体放什么样的图片,随便大家喜欢了。

  • width和height属性:这两个属性,我相信大家基本上都熟悉,一个是宽度属性,我建议大家放置100%,一个是高度属性,我建议是auto,让屏幕自动获取;

  • 这里的P属性:这是用于无法正常视频时所显示的文字提示。注意的是,这段P属性是在video属性里面的。

需要注意的是:

video自己支持的视频编码很少,现在支持的有mp4,webm,ogg几种格式(相应代码如下),由于这种技术是PC和移动设备同时享受,在移动设备上观看视频自然会产品大量的流量和缓存。所以,没必要还请慎重使用。

<video controls poster="demo.jpg">
   <source src="demo.mp4" type="video/mp4" />
   <source src="demo.webm" type="video/webm"/>
   <source src="demo.ogv" type="video/ogg"/>             
   <p>Fallback code if video isn't supported</p>
</video>

现在主流视频网站,如优酷土豆,乐视,搜狐视频等,他们运用的技术和方法远比这个要厉害的多,如果你想做成那样的效果,请自行努力吧。对于video属性不太属性的朋友,可以浏览官方的讲解。通过它,你可以自行编辑。

在zblogPHP想插入代码,可以通过文章编辑页面左上角的“html”打开源代码,插入相应代码。能帮他解决的问题也就到这里了,关于mp4文件的问题,还请自行解决吧。


作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论: