关闭

[置顶] 使用jPlayer实现带广告功能和试听试看功能的MP4/MP3播放

标签: jPlayer试听试看播放广告
1195人阅读 评论(0) 收藏 举报
分类:

先介绍一下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
    


  • 0
    0

    查看评论
    * 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
      个人资料
      • 访问:116306次
      • 积分:2120
      • 等级:
      • 排名:第19072名
      • 原创:105篇
      • 转载:18篇
      • 译文:0篇
      • 评论:25条
      文章分类
      最新评论