使用jPlayer实现带广告功能和试听试看功能的MP4/MP3播放
生活随笔
收集整理的這篇文章主要介紹了
使用jPlayer实现带广告功能和试听试看功能的MP4/MP3播放
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
先介紹一下jPlayer，這是個(gè)非常方便的免費(fèi)開源播放器。
我覺得最大的優(yōu)點(diǎn)是對各平臺的兼容性。
支持的平臺和瀏覽器：
- Windows:?Chrome, Firefox, Internet Explorer, Safari, Opera
- Windows (legacy):?IE6, IE7, IE8, IE9, IE10, IE11
- OSX:?Safari, Firefox, Chrome, Opera
- iOS:?Mobile Safari: iPad, iPhone, iPod Touch
- Android:?Android 2.3 Browser
- Blackberry:?OS 7 Phone Browser, PlayBook Browser
支持的媒體和格式：- HTML5:?mp3, mp4 (AAC/H.264), ogg (Vorbis/Theora), webm (Vorbis/VP8), wav
- Flash:?mp3, mp4 (AAC/H.264), rtmp, flv
下載請看官網(wǎng)：http://www.jplayer.cn/
-------------------------------------------------------------------------------------------------------
一. 播放5秒廣告，試看前10%視頻
<%@ page contentType="text/html;charset=UTF-8" %> <%@ include file="/WEB-INF/views/include/taglib.jsp"%> <html> <head><title>Video</title><meta name="decorator" content="default"/> <link href="${ctxStatic}/modules/smph/js/jPlayer/dist/skin/blue.monday/css/jplayer.blue.monday.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="${ctxStatic}/modules/smph/js/jPlayer/lib/jquery.min.js"></script> <script type="text/javascript" src="${ctxStatic}/modules/smph/js/jPlayer/dist/jplayer/jquery.jplayer.min.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){$("#jquery_jplayer_1").jPlayer({ready: function () {$(this).jPlayer("setMedia", {title: "Big Buck Bunny Trailer",m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv",webmv: "http://www.jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm",poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"}).jPlayer('play');},play: function() { // To avoid multiple jPlayers playing together.$(this).jPlayer("pauseOthers");},swfPath: "../../dist/jplayer",supplied: "webmv, ogv, m4v",globalVolume: true,useStateClassSkin: true,autoBlur: false,smoothPlayBar: true,keyEnabled: true,timeupdate: function(event) {// 播放5秒廣告if (event.jPlayer.status.currentTime > 5) {$("#jp_container_1").hide();$("#jp_container_2").show();$("#jquery_jplayer_2").jPlayer('play');}}});$("#jquery_jplayer_2").jPlayer({ready: function () {$(this).jPlayer("setMedia", {title: "Incredibles Teaser",m4v: "http://www.jplayer.org/video/m4v/Incredibles_Teaser.m4v",ogv: "http://www.jplayer.org/video/ogv/Incredibles_Teaser.ogv",webmv: "http://www.jplayer.org/video/webm/Incredibles_Teaser.webm",poster: "http://www.jplayer.org/video/poster/Incredibles_Teaser_640x272.png"});},play: function() { // To avoid multiple jPlayers playing together.$(this).jPlayer("pauseOthers");},swfPath: "../../dist/jplayer",supplied: "webmv, ogv, m4v",cssSelectorAncestor: "#jp_container_2",globalVolume: true,useStateClassSkin: true,autoBlur: false,smoothPlayBar: true,keyEnabled: true,timeupdate: function(event) {// 試看前10%if (event.jPlayer.status.currentPercentAbsolute > 10) {$(this).jPlayer('stop');}}});});//]]> </script> </head> <body><div id="jp_container_1" class="jp-video jp-video-270p" role="application" aria-label="media player"><div class="jp-type-single"><div id="jquery_jplayer_1" class="jp-jplayer"></div><div class="jp-no-solution"><span>Update Required</span>To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.</div></div></div><div id="jp_container_2" style="display:none;" class="jp-video jp-video-270p" role="application" aria-label="media player"><div class="jp-type-single"><div id="jquery_jplayer_2" class="jp-jplayer"></div><div class="jp-gui"><div class="jp-video-play"><button class="jp-video-play-icon" role="button" tabindex="0">play</button></div><div class="jp-interface"><div class="jp-progress"><div class="jp-seek-bar"><div class="jp-play-bar"></div></div></div><div class="jp-current-time" role="timer" aria-label="time">?</div><div class="jp-duration" role="timer" aria-label="duration">?</div><div class="jp-controls-holder"><div class="jp-controls"><button class="jp-play" role="button" tabindex="0">play</button><button class="jp-stop" role="button" tabindex="0">stop</button></div><div class="jp-volume-controls"><button class="jp-mute" role="button" tabindex="0">mute</button><button class="jp-volume-max" role="button" tabindex="0">max volume</button><div class="jp-volume-bar"><div class="jp-volume-bar-value"></div></div></div><div class="jp-toggles"><button class="jp-repeat" role="button" tabindex="0">repeat</button><button class="jp-full-screen" role="button" tabindex="0">full screen</button></div></div><div class="jp-details"><div class="jp-title" aria-label="title">?</div></div></div></div><div class="jp-no-solution"><span>Update Required</span>To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.</div></div></div> </body> </html>
二. 不播放廣告，看完整視頻
<%@ page contentType="text/html;charset=UTF-8" %> <%@ include file="/WEB-INF/views/include/taglib.jsp"%> <html> <head><title>Video</title><meta name="decorator" content="default"/> <link href="${ctxStatic}/modules/smph/js/jPlayer/dist/skin/blue.monday/css/jplayer.blue.monday.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="${ctxStatic}/modules/smph/js/jPlayer/lib/jquery.min.js"></script> <script type="text/javascript" src="${ctxStatic}/modules/smph/js/jPlayer/dist/jplayer/jquery.jplayer.min.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){$("#jquery_jplayer_2").jPlayer({ready: function () {$(this).jPlayer("setMedia", {title: "Incredibles Teaser",m4v: "http://www.jplayer.org/video/m4v/Incredibles_Teaser.m4v",ogv: "http://www.jplayer.org/video/ogv/Incredibles_Teaser.ogv",webmv: "http://www.jplayer.org/video/webm/Incredibles_Teaser.webm",poster: "http://www.jplayer.org/video/poster/Incredibles_Teaser_640x272.png"});},play: function() { // To avoid multiple jPlayers playing together.$(this).jPlayer("pauseOthers");},swfPath: "../../dist/jplayer",supplied: "webmv, ogv, m4v",cssSelectorAncestor: "#jp_container_2",globalVolume: true,useStateClassSkin: true,autoBlur: false,smoothPlayBar: true,keyEnabled: true});});//]]> </script> </head> <body><div id="jp_container_2" class="jp-video jp-video-270p" role="application" aria-label="media player"><div class="jp-type-single"><div id="jquery_jplayer_2" class="jp-jplayer"></div><div class="jp-gui"><div class="jp-video-play"><button class="jp-video-play-icon" role="button" tabindex="0">play</button></div><div class="jp-interface"><div class="jp-progress"><div class="jp-seek-bar"><div class="jp-play-bar"></div></div></div><div class="jp-current-time" role="timer" aria-label="time">?</div><div class="jp-duration" role="timer" aria-label="duration">?</div><div class="jp-controls-holder"><div class="jp-controls"><button class="jp-play" role="button" tabindex="0">play</button><button class="jp-stop" role="button" tabindex="0">stop</button></div><div class="jp-volume-controls"><button class="jp-mute" role="button" tabindex="0">mute</button><button class="jp-volume-max" role="button" tabindex="0">max volume</button><div class="jp-volume-bar"><div class="jp-volume-bar-value"></div></div></div><div class="jp-toggles"><button class="jp-repeat" role="button" tabindex="0">repeat</button><button class="jp-full-screen" role="button" tabindex="0">full screen</button></div></div><div class="jp-details"><div class="jp-title" aria-label="title">?</div></div></div></div><div class="jp-no-solution"><span>Update Required</span>To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.</div></div></div> </body> </html>
三. 不播放廣告，試聽前10%Mp3
<%@ page contentType="text/html;charset=UTF-8" %> <%@ include file="/WEB-INF/views/include/taglib.jsp"%> <html> <head><title>Audio</title><meta name="decorator" content="default"/> <link href="${ctxStatic}/modules/smph/js/jPlayer/dist/skin/blue.monday/css/jplayer.blue.monday.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="${ctxStatic}/modules/smph/js/jPlayer/lib/jquery.min.js"></script> <script type="text/javascript" src="${ctxStatic}/modules/smph/js/jPlayer/dist/jplayer/jquery.jplayer.min.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){$("#jquery_jplayer_3").jPlayer({ready: function () {$(this).jPlayer("setMedia", {title: "Bubble",m4a: "http://jplayer.org/audio/mp3/Miaow-07-Bubble.mp3",oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"});},swfPath: "../../dist/jplayer",supplied: "m4a, oga",cssSelectorAncestor: "#jp_container_3",wmode: "window",globalVolume: true,useStateClassSkin: true,autoBlur: false,smoothPlayBar: true,keyEnabled: true,timeupdate: function(event) {// 試聽前10%if (event.jPlayer.status.currentPercentAbsolute > 10) {$(this).jPlayer('stop');}}});});//]]> </script> </head> <body><div id="jquery_jplayer_3" class="jp-jplayer"></div><div id="jp_container_3" class="jp-audio" role="application" aria-label="media player"><div class="jp-type-single"><div class="jp-gui jp-interface"><div class="jp-controls"><button class="jp-play" role="button" tabindex="0">play</button><button class="jp-stop" role="button" tabindex="0">stop</button></div><div class="jp-progress"><div class="jp-seek-bar"><div class="jp-play-bar"></div></div></div><div class="jp-volume-controls"><button class="jp-mute" role="button" tabindex="0">mute</button><button class="jp-volume-max" role="button" tabindex="0">max volume</button><div class="jp-volume-bar"><div class="jp-volume-bar-value"></div></div></div><div class="jp-time-holder"><div class="jp-current-time" role="timer" aria-label="time">?</div><div class="jp-duration" role="timer" aria-label="duration">?</div><div class="jp-toggles"><button class="jp-repeat" role="button" tabindex="0">repeat</button></div></div></div><div class="jp-details"><div class="jp-title" aria-label="title">?</div></div><div class="jp-no-solution"><span>Update Required</span>To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.</div></div></div> </body> </html>
四. 在一個(gè)頁面中，用后臺傳參數(shù)控制播放內(nèi)容
sample.jsp：
<%@ page contentType="text/html;charset=UTF-8" %> <%@ include file="/WEB-INF/views/include/taglib.jsp"%> <html> <head><title>Video</title><meta name="decorator" content="default"/> <link href="${ctxStatic}/modules/smph/js/jPlayer/dist/skin/blue.monday/css/jplayer.blue.monday.min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="${ctxStatic}/modules/smph/js/jPlayer/lib/jquery.min.js"></script> <script type="text/javascript" src="${ctxStatic}/modules/smph/js/jPlayer/dist/jplayer/jquery.jplayer.min.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){$("#jquery_jplayer_1").jPlayer({ready: function () {$(this).jPlayer("setMedia", {title: "Big Buck Bunny Trailer",m4v: "${advertisment}",ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv",webmv: "http://www.jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm",poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"}).jPlayer('play');},play: function() { // To avoid multiple jPlayers playing together.$(this).jPlayer("pauseOthers");},swfPath: "../../dist/jplayer",supplied: "webmv, ogv, m4v",globalVolume: true,useStateClassSkin: true,autoBlur: false,smoothPlayBar: true,keyEnabled: true,timeupdate: function(event) {// 播放5秒廣告，5秒過后，廣告部分隱藏，開始播放視頻if (event.jPlayer.status.currentTime > 5) {$("#jp_container_1").hide();$("#jp_container_2").show();$("#jquery_jplayer_2").jPlayer('play');}}});$("#jquery_jplayer_2").jPlayer({ready: function () {$(this).jPlayer("setMedia", {title: "Incredibles Teaser",m4v: "${source}",ogv: "http://www.jplayer.org/video/ogv/Incredibles_Teaser.ogv",webmv: "http://www.jplayer.org/video/webm/Incredibles_Teaser.webm",poster: "http://www.jplayer.org/video/poster/Incredibles_Teaser_640x272.png"});},play: function() { // To avoid multiple jPlayers playing together.$(this).jPlayer("pauseOthers");},swfPath: "../../dist/jplayer",supplied: "webmv, ogv, m4v",cssSelectorAncestor: "#jp_container_2",globalVolume: true,useStateClassSkin: true,autoBlur: false,smoothPlayBar: true,keyEnabled: true,timeupdate: function(event) {// 如果是試看的話，只播放前10%if (${demo}==1 && event.jPlayer.status.currentPercentAbsolute > 10) {$(this).jPlayer('stop');}}});$("#jquery_jplayer_3").jPlayer({ready: function () {$(this).jPlayer("setMedia", {title: "Bubble",m4a: "${source}",oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"});},swfPath: "../../dist/jplayer",supplied: "m4a, oga",cssSelectorAncestor: "#jp_container_3",wmode: "window",globalVolume: true,useStateClassSkin: true,autoBlur: false,smoothPlayBar: true,keyEnabled: true,timeupdate: function(event) {// 如果是試聽的話，只播放前10%if (${demo}==1 && event.jPlayer.status.currentPercentAbsolute > 10) {$(this).jPlayer('stop');}}});});//]]> </script> </head> <body><c:if test="${member ne 1 && type eq 'mp4'}"><div id="jp_container_1" class="jp-video jp-video-270p" role="application" aria-label="media player"><div class="jp-type-single"><div id="jquery_jplayer_1" class="jp-jplayer"></div><div class="jp-no-solution"><span>Update Required</span>To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.</div></div></div><div id="jp_container_2" style="display:none;" class="jp-video jp-video-270p" role="application" aria-label="media player"><div class="jp-type-single"><div id="jquery_jplayer_2" class="jp-jplayer"></div><div class="jp-gui"><div class="jp-video-play"><button class="jp-video-play-icon" role="button" tabindex="0">play</button></div><div class="jp-interface"><div class="jp-progress"><div class="jp-seek-bar"><div class="jp-play-bar"></div></div></div><div class="jp-current-time" role="timer" aria-label="time">?</div><div class="jp-duration" role="timer" aria-label="duration">?</div><div class="jp-controls-holder"><div class="jp-controls"><button class="jp-play" role="button" tabindex="0">play</button><button class="jp-stop" role="button" tabindex="0">stop</button></div><div class="jp-volume-controls"><button class="jp-mute" role="button" tabindex="0">mute</button><button class="jp-volume-max" role="button" tabindex="0">max volume</button><div class="jp-volume-bar"><div class="jp-volume-bar-value"></div></div></div><div class="jp-toggles"><button class="jp-repeat" role="button" tabindex="0">repeat</button><button class="jp-full-screen" role="button" tabindex="0">full screen</button></div></div><div class="jp-details"><div class="jp-title" aria-label="title">?</div></div></div></div><div class="jp-no-solution"><span>Update Required</span>To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.</div></div></div></c:if><c:if test="${member eq 1 && type eq 'mp4'}"><div id="jp_container_2" class="jp-video jp-video-270p" role="application" aria-label="media player"><div class="jp-type-single"><div id="jquery_jplayer_2" class="jp-jplayer"></div><div class="jp-gui"><div class="jp-video-play"><button class="jp-video-play-icon" role="button" tabindex="0">play</button></div><div class="jp-interface"><div class="jp-progress"><div class="jp-seek-bar"><div class="jp-play-bar"></div></div></div><div class="jp-current-time" role="timer" aria-label="time">?</div><div class="jp-duration" role="timer" aria-label="duration">?</div><div class="jp-controls-holder"><div class="jp-controls"><button class="jp-play" role="button" tabindex="0">play</button><button class="jp-stop" role="button" tabindex="0">stop</button></div><div class="jp-volume-controls"><button class="jp-mute" role="button" tabindex="0">mute</button><button class="jp-volume-max" role="button" tabindex="0">max volume</button><div class="jp-volume-bar"><div class="jp-volume-bar-value"></div></div></div><div class="jp-toggles"><button class="jp-repeat" role="button" tabindex="0">repeat</button><button class="jp-full-screen" role="button" tabindex="0">full screen</button></div></div><div class="jp-details"><div class="jp-title" aria-label="title">?</div></div></div></div><div class="jp-no-solution"><span>Update Required</span>To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.</div></div></div></c:if><c:if test="${type eq 'mp3'}"><div id="jquery_jplayer_3" class="jp-jplayer"></div><div id="jp_container_3" class="jp-audio" role="application" aria-label="media player"><div class="jp-type-single"><div class="jp-gui jp-interface"><div class="jp-controls"><button class="jp-play" role="button" tabindex="0">play</button><button class="jp-stop" role="button" tabindex="0">stop</button></div><div class="jp-progress"><div class="jp-seek-bar"><div class="jp-play-bar"></div></div></div><div class="jp-volume-controls"><button class="jp-mute" role="button" tabindex="0">mute</button><button class="jp-volume-max" role="button" tabindex="0">max volume</button><div class="jp-volume-bar"><div class="jp-volume-bar-value"></div></div></div><div class="jp-time-holder"><div class="jp-current-time" role="timer" aria-label="time">?</div><div class="jp-duration" role="timer" aria-label="duration">?</div><div class="jp-toggles"><button class="jp-repeat" role="button" tabindex="0">repeat</button></div></div></div><div class="jp-details"><div class="jp-title" aria-label="title">?</div></div><div class="jp-no-solution"><span>Update Required</span>To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.</div></div></div></c:if> </body> </html>
sampleController.java：
package com.thinkgem.jeesite.modules.resource.web;import javax.servlet.http.HttpServletRequest;import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping;import com.thinkgem.jeesite.common.web.BaseController;/*** 資源試聽試看Controller* @author sunwl* @version 2016-08-29*/ @Controller @RequestMapping(value = "${frontPath}/sample") public class SampleController extends BaseController {@RequestMapping(value = "")public String load(HttpServletRequest request, Model models) {<span style="white-space:pre"> </span>// 從DB中取得視頻信息和權(quán)限控制等操作省略 <span style="white-space:pre"> </span>// ...<span style="white-space:pre"> </span>// 下面只是傳一些臨時(shí)參數(shù)給JSP// 是否是會員（1:會員 0：非會員） 非會員的時(shí)候觀看視頻會先播放廣告models.addAttribute("member", request.getParameter("member"));// 是否是試聽（1：試聽 0：全部觀看）models.addAttribute("demo", request.getParameter("demo"));// 播放類型（mp4/mp3）models.addAttribute("type", request.getParameter("type"));// 廣告URI（這里我隨便選了個(gè)視頻做廣告）models.addAttribute("advertisment", "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v");if (request.getParameter("type").equals("mp4"))// mp4的URImodels.addAttribute("source", "http://www.jplayer.org/video/m4v/Incredibles_Teaser.m4v");else// mp3的URImodels.addAttribute("source", "http://jplayer.org/audio/mp3/Miaow-07-Bubble.mp3");// 顯示JSP畫面return "views/sample";}}
URL：
// 播放廣告和試看視頻 sample?member=0&demo=1&type=mp4 // 不播放廣告，全部觀看視頻 sample?member=1&demo=0&type=mp4 // 試聽MP3 sample?member=1&demo=1&type=mp3 // 聽完整mp3 sample?member=1&demo=0&type=mp3
總結(jié)
以上是生活随笔為你收集整理的使用jPlayer实现带广告功能和试听试看功能的MP4/MP3播放的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一个初学编程的草根大叔用了一个月时间冲上
- 下一篇： access to同义替换_雅思写作常用