音视频、pdf文件预览（兼容IE8）

最近有个需求，上传的文件需要预览，上传图片的要显示图片，上传音视频的要可以在线播放，上传文档的要可以在线阅读，并且所有功能都要支持IE8

采取的解决方案是这样的：

图片：当然不用说直接显示就行
音频：在高版浏览器中使用audio，在IE8中使用embed，要注意的是想要浏览器都兼容需要后台转换提供.wav与.mp3两种音频格式
视频：使用video.js，只支持MP4格式，如需支持IE8则需使用5.8.8以下版本，引入swf播放
文件：所有上传的word、excel、ppt等，都需转换成pdf，高版本浏览器使用pdf.js，IE8需安装Adobe PDF Reader，下载AdbeRdr11000_zh_CN_11.0.0.379.exe

PS：
1. Adobe PDF Reader 还可能遇到的崩溃问题解决办法
2. www.runoob.com这个网站不支持IE8访问，所以请自行更换资源

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>常用文件预览（兼容IE8）</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://vjs.zencdn.net/5.8.8/video-js.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
    <![endif]-->
    <script src="http://vjs.zencdn.net/5.8.8/video.min.js"></script>
  </head>
  <body>
    <noscript>
      您需要启用JavaScript才能运行此应用程序。
    </noscript>

    <div class="container">
      <div>
        <h3>图片：</h3>
        <img src="https://www.runoob.com/wp-content/uploads/2014/06/download.png" class="img-thumbnail">
      </div>

      <div>
        <h3>音频：</h3>
        <!--[if (gte IE 9)|!(IE)]><!-->
        <audio preload="auto" controls="controls">
          <source src="https://www.runoob.com/try/demo_source/horse.wav" type="audio/wav" />
          <source src="https://www.runoob.com/try/demo_source/horse.mp3" type="audio/mpeg" />
          您的浏览器不支持 audio 标签。
        </audio>
        <!--<![endif]-->
        <!--[if lt IE 9]>
        <embed src="https://www.runoob.com/try/demo_source/horse.wav" autostart="false" />
        <![endif]-->
      </div>

      <div>
        <h3>视频：</h3>
        <video id="video" class="active video-js vjs-default-skin" data-setup="{}"></video>
      </div>

      <div>
        <h3>文件（pdf）：</h3>
        <!--[if (gte IE 9)|!(IE)]><!-->
        <iframe src="https://mozilla.github.io/pdf.js/es5/web/viewer.html?
        file=https://mozilla.github.io/pdf.js/es5/web/compressed.tracemonkey-pldi-09.pdf" width="100%" height="1000px" frameborder="0"></iframe>
        <!--<![endif]-->
        <!--[if lt IE 9]>
        <object id="pdfActiveX" name="pdfActiveX" classid="clsid:CA8A9780-280D-11CF-A24D-444553540000" width="100%" height="1000px" border="0">
          <param name="_Version" value="65539">
          <param name="_ExtentX" value="20108">
          <param name="_ExtentY" value="10866">
          <param name="_StockProps" value="0">
          <param name="src" value="https://mozilla.github.io/pdf.js/es5/web/compressed.tracemonkey-pldi-09.pdf">
        </object>
        <![endif]-->
      </div>
    </div>

  <script>
    //videojs.options.flash.swf = '//vjs.zencdn.net/swf/5.0.1/video-js.swf';
    var player = videojs('video',{
      autoplay: true,
      preload: true,
      muted: false,
      controls : true,
      width: 320,
      height: 240,
      sources: [{
        src: 'https://www.runoob.com/try/demo_source/movie.mp4',
        type: 'video/mp4'
      }]
    });

    //销毁
    //player.dispose()

    isAcrobatInstalled();
    
    /**
     * 判断插件是否安装
     */
    function isAcrobatInstalled() {
      //获取Adobe Reader插件信息
      //针对IE返回ActiveXObject
      function getActiveXObject (name){
        try {
          return new ActiveXObject(name);
        } catch(e) {
          return false;
        }
      }

      //获取Adobe Reader插件信息
      function getPDFPlugin(){
        return getActiveXObject('AcroPDF.PDF') || getActiveXObject('PDF.PdfCtrl');
      }

      if(!getPDFPlugin()) {
        alert('没有安装Adobe PDF Reader')
      }
    }
  </script>
  </body>
</html>

A3191FCE-AC7D-4707-845F-D1A97C7D30F4.png