Home > Industries > Media
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 ):
Http://jquery.malsup.com/media/
Http://malsup.com/jquery/media/
View preview: http://sources.ikeepstudying.com/jquery.media/pdf.php
First, introduce the corresponding js file:
| 12 | <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="jquery.media.js"></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: http://down.51cto.com/data/2246918
Attached a completed test case, the default effect is preview:
| 12345678910111213141516 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" 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="jquery.media.js"></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!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
