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

原创 2016年08月31日 14:29:25

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


版权声明:本文为博主原创文章,未经博主允许不得转载。

jplayer播放器完整标准的写法应该是这样的

Tomorrowland 2013 - Aftermovie                                                                      ...
  • WK313753744
  • WK313753744
  • 2014年05月10日 10:51
  • 18005

Ckplayer试看功能

Ckplayer试看功能 最近在做一个付费看视频项目,找了很多视频插件,一直得不到自己想要的效果,直到看到CK。 在此,感谢CK给我们带来如此好的插件。废话不多说上代码(大神绕道)。 在flas...
  • qq_32534855
  • qq_32534855
  • 2017年02月09日 15:19
  • 1430

关于播放器JPlayer的使用及遇到的问题

jPlayer是一个用于控制和播放mp3文件的jQuery插件。它在后台使用Flash来播放mp3文件,前台播放器外观完全可以使用XHML/CSS自定义。支持: 有一点比较好的是,在支持html5的...
  • z69183787
  • z69183787
  • 2012年11月13日 15:12
  • 13268

安卓视音频播放测试工程

  • 2014年03月12日 19:02
  • 16.41MB
  • 下载

网页播放器带视频节目预览(视频收费模式/节目试看)免费版哦

  • 2016年06月02日 10:03
  • 1.3MB
  • 下载

jPlayer使用指南

1. jPlayer基础 1\ FLASH安全规则 a. jPlay插件的SWF文件必须要在你的域内,子域与主域被视为不同域.也不要从happyworm.com网站(就是提供这个插件的网站)来...
  • fenghome
  • fenghome
  • 2013年05月24日 16:29
  • 10147

HTML5音频播放,歌词同步,及视频播放功能(JPlayer、JWPlayer、VideoJS)

HTML5音频播放,歌词同步,及视频播放功能(JPlayer、JWPlayer、VideoJS)
  • wanlong360599336
  • wanlong360599336
  • 2015年06月12日 18:08
  • 6733

jplayer详解

下载官网:http://www.jplayer.org/ 当前版本:2.3.0 功能:视频播放(可全屏)、音乐播放 全部原教程,说明并不详细,要结合查看其网页源代码来学习:http://www....
  • u010721580
  • u010721580
  • 2015年05月07日 17:07
  • 1518

jplayer播放器完整标准的写法应该是这样的

Tomorrowland 2013 - Aftermovie                                                                      ...
  • WK313753744
  • WK313753744
  • 2014年05月10日 10:51
  • 18005

jPlayer使用详解(转)

下载官网:http://www.jplayer.org/ 当前版本:2.3.0 功能:视频播放(可全屏)、音乐播放 全部原教程,说明并不详细,要结合查看其网页源代码来学习:http://www....
  • z295304557
  • z295304557
  • 2013年12月13日 10:48
  • 30220
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用jPlayer实现带广告功能和试听试看功能的MP4/MP3播放
举报原因:
原因补充:

(最多只允许输入30个字)