JW Player 6 免费版试用记录

最新推荐文章于 2025-06-23 15:51:51 发布

最新推荐文章于 2025-06-23 15:51:51 发布 · 442 阅读

文章标签：

#javascript #java #前端框架 #ViewUI

javascript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种基于jQuery和JWPlayer实现的在线视频课程播放功能，包括自动播放、声音控制、视频列表、字幕等功能，并提供了视频课程的快速切换方式。

<script type="text/javascript" src="jquery-ui-1.9.2.custom/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="jwplayer/jwplayer.js"></script>



<script type="text/javascript">
$(function() {
    jwplayer("myElement").setup({
        file: "video/videoplayback_4.mp4",
		image: "学生.jpg",
		title:"JAVA原理与思想",
        width: 850,
		autostart: false,//自动播放
		mute: false,//声音关闭
		fallback: false,//禁用下载回调
		//skin: "beelden",//不可用-免费版没有皮肤
		primary: "mp4",
		//aspectratio: "12:5",//播放器比例，启用时只能使用width一个参数
		/*   视频列表栏-可用
        playlist: [{
        image: "学生.jpg",
        file: "video/videoplayback_4.mp4",
        title: "JAVA原理与思想"
		},{
        image: "images/icon-item-list.png",
        file: "video/videoplayback_4_start=44000.mp4",
        title: "IO流"
		}],
		listbar: {
			position: 'right',
			size: 320
		},*/
		/*   logo-不可用-免费版不能用logo
		logo: {
        file: 'images/icon-item-list.png',
        link: 'http://www.baidu.com'
		},
		*/
		/*  字幕-可用
		tracks: [{ 
            file: "/assets/captions-en.vtt", 
            label: "English",
            kind: "captions",
            "default": true 
        },{ 
            file: "/assets/captions-fr.vtt", 
            kind: "captions",
            label: "French"
        }],*/
		
		height:450
    });

	});

/*切换课件*/
function changevideo(url,title,start,end){
	jwplayer("myElement").setup({
		file: url,
		title:title,
		image: "学生.jpg",
		width: 850,
		height:450
	});
	//如果start不为空，则从start秒开始播放
	if(null != start && start > 0 ){
		jwplayer("myElement").seek(start);
	}
	
	//如果end不为空,则播放到end秒停止
	if(null != end && null != start && end > 0 && end > start){
		jwplayer('myElement').onTime(function(event){
			//console.info("duration:"+event.duration);
			//$.each(  duration , function(i, n){
			 // alert( "Name: " + i + ", Value: " + n );
			//});
			//console.info("position:"+event.position);
			//如果用户拖动到限制之外的区域，则重回start播放
			if(event.position > end || event.position < start){
				jwplayer('myElement').seek(start);
			}
		});
	}
	
}
</script>

<p>课件列表：</p>
<p><a href="javascript:changevideo('video/videoplayback_4.mp4','JAVA原理与思想',null,null);">JAVA原理与思想</a></p>
<p><a href="javascript:changevideo('video/videoplayback_4.mp4','IO流',null,null);">IO流</a></p>
<p><a href="javascript:changevideo('video/videoplayback_4.mp4','多线程',null,null);">多线程</a></p>
<p><a href="javascript:changevideo('video/videoplayback_4.mp4','JDBC',null,null);">JDBC</a></p>
<p><a href="javascript:changevideo('video/videoplayback_4.mp4','前端框架',null,null);">前端框架</a></p>
<p><a href="javascript:changevideo('video/videoplayback_4.mp4','10秒-30秒播放',10,30);">10秒-30秒播放</a></p>



<div id="myElement">视频课件加载中...</div>