Use the Jquery Media plugin to preview and open PDF files online.

Source: Internet
Author: User

Use the Jquery Media plugin to preview and open PDF files online.

Yuan and yuanshu, who have used PDF, will always find that the omnipotent Player Plug-in the world can always have fewer interfaces for media control.

You will always find that PDF files cannot be normally loaded and displayed like img images, so we have expanded the PDF plug-in for previewing and opening on the basis of general syntax to facilitate development and application.

The most important thing is to use a jquery plug-in jquery. media. js, which is easy to implement.

This plug-in can play a variety of types of multimedia files, including Flash, Quicktime, Windows Media Player, Real Player, MP3, Silverlight, PDF, etc., provided that the corresponding plug-ins are installed in the client browser.

This plug-in mainly converts the <a> tag to <div>, and generates <Object> objects suitable for playback of different types of multimedia files to parse the translation process, to achieve the effect of multimedia playback. The conversion process is implemented in the client browser, so there is a time difference between opening the webpage and the player.


The official explanation is as follows:

Player File Formats
Quicktime Aif, aiff, aac, au, bmp, gsm, mov, mid, midi, mpg, mpeg, mp4, m4a, psd, qt, qtif, qif, qti, snd, tif, tiff, wav, 3g2, 3pg
Flash Flv, mp3, swf
Windows Media Player Asx, asf, avi, wma, wmv
Real Player Ra, ram, rm, rpm, rv, smi, smil
Silverlight Xaml
Iframe Html, pdf

First, attach the official website (2 to 1 ):




View preview:


First, introduce the corresponding js file:

12 <script type="text/javascript" src="jquery-1.7.1.min.js"></script>  <script type="text/javascript" src=""></script>


Next, add the js code to be executed after the page is loaded. Take preview PDF as an example:

12345 <script type="text/javascript">  $(function() {      $('.pdf1').media(width:450, height:350,autoplay: true,src=\'#\'" /upload/pdf/${pdfFile}');  });  </script>

Finally, add the HTML code:

123 <body>    <div class="pdf"></div></body>


The following complete functional code and documentation:


Attached a completed test case, the default effect is preview:

12345678910111213141516 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">  <html xmlns="" xml:lang="zh-CN" dir="ltr">  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  <title>Online View PDF</title>  <script type="text/javascript" src="jquery-1.8.3.min.js"></script>  <script type="text/javascript" src=""></script>  <script type="text/javascript">      $(function() {          $('.media').media({width:800, height:600,autoplay: true,src=\'#\'" /script>  </head>      <body>     <div class="media"></div>   <a href="opertaion.pdf" target="_blank"> Open PDF </a></body>  </html>


However, the point is that the browser compatibility of this plug-in is not very good, and the expected effect is the browser version applicable to H5 applications. Google's browser is the best, but it is enough for most existing businesses.

For more syntaxes, refer to the official instance!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.