Jquery.Media

官方网站:https://jquery.malsup.com/media/

Jquery.Media 简介

Jquery Media 支持将标准标记转换为富媒体内容。它可以用来嵌入任何媒体类型,包括 Flash、Quicktime、Windows media Player、Real Player、MP3、Silverlight、PDF 等等。插件转换一个元素 (通常是<a>) 变成一个 <div> 它保存着 object ,embediframe 呈现媒体内容所必需的标记。

使用 Jquery.Media

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/sky390/jquery.media@main/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/sky390/jquery.media@main/jquery.media.js"></script>

代码实现

<!DOCTYPE html>  
<html>  
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  
<title>在线预览PDF文档</title>  

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/sky390/jquery.media@main/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/sky390/jquery.media@main/jquery.media.js"></script>  
<script type="text/javascript">  
    $(function() {  
        $('a.media').media({width:"70%", height:600});  
    });  
</script> 

</head>
<body>
<center>
 <div class="panel panel-primary">
   <div class="panel-heading" align="center">
      <h2>Jquery.Media 实现 PDF 文件预览</h2>
   </div>
   <div class="panel-body">
      <a class="media" href="yulan.pdf"></a>  
   </div>
</center>
</body>
</html>

效果截图
PDF 预览.png

Jquery.Media 缺点

  • 兼容性不高,无法在手机上正常预览,在 IE 浏览器下会自动下载。(这也是我不在博客里用它的原因
  • 在不同浏览器下显示有很大的不同。
Last modification:April 5th, 2021 at 12:18 pm
赠人玫瑰,手有余香。您的赞赏是对我最大的支持!