关于云平台中OFFICE预览与视频预览的解决办法

最近,随着firefox x64的升级,出现flash插件完全被禁止的现象,html5替换是大势所趋,原来我们在云平台中有多处使用flash的地方,比如OFFICE预览,视频播放,游戏等,现对于OFFICE预览和视频预览做出如下技术方案,供大家探讨:

1、对于office,我的意见是使用pdf,即office通过c#+office api转成pdf,然后在前端使用pdf.js进行预览,此处比较清晰,请前端组自行研究解决办法,并在项目中应用。使用后swf方式将废弃。

2、HTML5里的视频video标签如果要覆盖主流的浏览器的话,至少要包含webmoggmp4三种视频格式,这是最终的调研结果,放弃原来的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上不同浏览器的播放,重点要看视频的分辨率和是不是有声音等细节。

原文地址:https://www.cnblogs.com/littlehb/p/7804959.html