利用video.js在网站首页实现高大上的视频产品介绍

2014-11-14 13:20

利用video.js在网站首页实现高大上的视频产品介绍

现在产品介绍网站页面设计越来越简洁.并且也更加重视用图文内容来说明产品.通过多页滚动来实现用户最少化操作了解产品的方方面面.

但随着宽带的发展及html5技术的发展.高大上的做法就是把企业通过电视器播放的视频直接放在网站首页第一屏上,让用户看到一张震撼的图片中间一个箭头是可点的,一点高大上的视频产品介绍就开始了.有声音,有文字,有图片.

而实现这视频播放就是一些js组件,并且还有一个简单的实现办法把视频上传到优酷,通过video.js嵌入到自己网站来播放..

具体实现如下:

首先要把优酷的mp4地址找出来,点开播放地址,一般是http://v.youku.com/v_show/id_XNjUyODg2MTQ4.html样的,把它改成http://v.youkuxia.com/v_show/id_XNjUyODg2MTQ4.html,接着点击下载,就能得到http://222.73.245.142/youku/6773FB70C46317EFCBF3855D2/030008010052BA9C44E4B9013437F52C2FDE1D-F63F-8156-92D9-8E193DDD1265.mp4 这样的真正mp4地址.

接着使用

video标签在html5中就可以直接播放了,涉及到不支持html5的浏览器再换成video.js来播放.

但是这种实现办法有一个致命的问题,优酷的mp4文件链接地址是会变的。所以你现在看不到视频了。于是还有一种终极解决办法,是用html5播放器

效果如下:

这种方式也有一个悲剧,只支持safari与手机浏览器的播放。