最近有個需求，上傳的文件需要預覽，上傳圖片的要顯示圖片，上傳音視頻的要可以在線播放，上傳文檔的要可以在線閱讀，并且所有功能都要支持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 rel="stylesheet">
<link 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
