先介绍一下jPlayer，这是个非常方便的免费开源播放器。
我觉得最大的优点是对各平台的兼容性。
支持的平台和浏览器：
- 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
下载请看官网：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>
四. 在一个页面中，用后台传参数控制播放内容
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中取得视频信息和权限控制等操作省略 <span style="white-space:pre"> </span>// ... <span style="white-space:pre"> </span>// 下面只是传一些临时参数给JSP // 是否是会员（1:会员 0：非会员） 非会员的时候观看视频会先播放广告 models.addAttribute("member", request.getParameter("member")); // 是否是试听（1：试听 0：全部观看） models.addAttribute("demo", request.getParameter("demo")); // 播放类型（mp4/mp3） models.addAttribute("type", request.getParameter("type")); // 广告URI（这里我随便选了个视频做广告） models.addAttribute("advertisment", "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"); if (request.getParameter("type").equals("mp4")) // mp4的URI models.addAttribute("source", "http://www.jplayer.org/video/m4v/Incredibles_Teaser.m4v"); else // mp3的URI models.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
394
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
