• 关于云平台中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上不同浏览器的播放,重点要看视频的分辨率和是不是有声音等细节。

  • 相关阅读:
    java设计模式之单例模式总结
    分页功能实现
    java设计模式之代理模式模式总结
    java设计模式之策略模式总结
    快速排序解决相关问题
    单例模式之恶汉模式(详解)
    java多线程之内存的可见性介绍(备用1)
    Robotframework(4):创建变量的类型和使用
    Robotframework(3):使用pycharm编写和运行RF脚本
    Robotframework(2):创建RF第一条可执行的用例
  • 原文地址:https://www.cnblogs.com/littlehb/p/7804959.html
Copyright © 2020-2023  润新知