关于云平台中OFFICE预览与视频预览的解决办法
最近,随着firefox x64的升级,出现flash插件完全被禁止的现象,html5替换是大势所趋,原来我们在云平台中有多处使用flash的地方,比如OFFICE预览,视频播放,游戏等,现对于OFFICE预览和视频预览做出如下技术方案,供大家探讨:
1、对于office,我的意见是使用pdf,即office通过c#+office api转成pdf,然后在前端使用pdf.js进行预览,此处比较清晰,请前端组自行研究解决办法,并在项目中应用。使用后swf方式将废弃。
2、HTML5
里的视频video标签
如果要覆盖主流的浏览器的话,至少要包含webm
、ogg
和mp4
三种视频格式,这是最终的调研结果,放弃原来的m3u8解决方案,在PC上播放时采用如下代码:
<head> <title>Video.js | HTML5 Video Player</title> <link href="./js/video-js.css" rel="stylesheet"> <script src="./js/videojs-ie8.min.js"></script> <script src="./js/video.js"></script> </head> <body> <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264" poster="./js/oceans.png" data-setup="{}"> <source src="http://dsideal-yy.oss-cn-qingdao.aliyuncs.com/down/Material/5B/5B1AB0CC-8388-4D09-BC5F-EF4FF3FBDCCF.mp4" type="video/mp4"> <source src="http://dsideal-yy.oss-cn-qingdao.aliyuncs.com/down/Material/5B/5B1AB0CC-8388-4D09-BC5F-EF4FF3FBDCCF.webm" type="video/webm"> <source src="http://dsideal-yy.oss-cn-qingdao.aliyuncs.com/down/Material/5B/5B1AB0CC-8388-4D09-BC5F-EF4FF3FBDCCF.ogg" type="video/ogg"> <track kind="captions" src="../shared/example-captions.vtt" srclang="en" label="English"></track> <!-- Tracks need an ending tag thanks to IE9 --> <track kind="subtitles" src="../shared/example-captions.vtt" srclang="en" label="English"></track> <!-- Tracks need an ending tag thanks to IE9 --> <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p> </video> </body>
完整源码见附件。 链接:http://pan.baidu.com/s/1jI7WIe6 密码:vi2u
代价:原来一个18,830KB的MP4文件,需要转换成 34,347KB的ogg文件和一个47,837KB的webm文件,体积增加了三倍!!意味着时间更长,磁盘占用更多。
请手机组和前端组分别测试三面的三种格式,是不是能满足手机和PC上不同浏览器的播放,重点要看视频的分辨率和是不是有声音等细节。