关于JWPlayer播放器的一些测试学习

最新推荐文章于 2021-06-17 09:41:54 发布

weixin_30488313

最新推荐文章于 2021-06-17 09:41:54 发布

阅读量86

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sharing1986687846/p/7520812.html

本文介绍了一个具体的jwplayer播放器使用案例，包括如何设置播放器密钥、控制播放状态、监听播放事件等操作。通过示例代码展示了如何实现视频播放控制功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<title>jwplayer播放器测试</title>
<script type="text/javascript" src="scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="scripts/jwplayer.js"></script>

<script type="text/javascript">jwplayer.key="W+FSSIJICMeqqi4MQCwmdLePq9iq8HQqiVT5dQ==";</script>
</head>
<body>

<div id="container"></div>
<input type="button" class="player-play" value="播放" />
<input type="button" class="player-stop" value="停止" />
<input type="button" class="player-status" value="取得状态" />
<input type="button" class="player-current" value="当前播放秒数" />
<input type="button" class="player-goto" value="转到第4秒播放" />
<input type="button" class="player-length" value="视频时长(秒)" />

</body>
<script type="text/javascript">
var temp = 1;
$(function() {

var playerInstance = jwplayer('container');
//初始化视频
playerInstance.setup({
//视频文件来源
file: 'scripts/video.mp4',
//显示的背景图片
image: 'scripts/bg.jpg',

});
/*playerInstance.on('pause',function(obj){

alert(obj.oldstate);
});*/
playerInstance.on('complete',function(){

alert("播放完毕");

});
//监控播放时间
playerInstance.on('time',function(obj){
//总时间
//alert(obj.duration);
//获取当前的播放时间
var time = obj.position;
var v1 = parseFloat(time.toFixed(0));
//不回答问题不能进行播放下面的视频
if(v1 > 3 && temp ==1){

playerInstance.seek(3);
}
var v2 = parseFloat("3");
if(v1 == v2){
if(temp == 1){
playerInstance.pause();

var name = prompt("请输入您的名字","");
if(name == "高旭旭"){

temp += 1;
playerInstance.play();
}
}
}
});
//点击播放执行的事件
/*playerInstance.on('play',function(){

var time = playerInstance.getPosition();
var v1 = parseFloat(time.toFixed(0));
if(v1 > 3 && temp ==1){

playerInstance.seek(4);
}

});*/
//缓冲
/*playerInstance.on('buffer',function(obj){

var name = obj.reason;
if(name == "loading"){

alert("正在缓冲");
}

});*/
//在播放之前触发的时间
playerInstance.on('playAttempt',function(){

alert("开始播放了，是否检测登录?");

});
//加载视频的时间
/*playerInstance.on('firstFrame',function(obj){

alert("加载视频时间:"+(obj.loadTime/1000));
});*/

playerInstance.on('error',function(){

alert("视频出错了...");
playerInstance.play();
});
//停止播放
$(".player-stop").click(function(){

playerInstance.pause();

});
//播放
$(".player-play").click(function(){

playerInstance.play();
});
//获取当前播放的秒数（时间）
$(".player-current").click(function(){

var time = playerInstance.getPosition();
alert(time);
});
//转到多长时间
$(".player-goto").click(function(){

playerInstance.seek(4);

});
//获取播放状态
$(".player-status").click(function(){

/**4种状态
* 1:没有播放 idle
* 2：正在播放playing
* 3:停止paused
* 4:播放完毕complete
*/
alert(playerInstance.getState());
});

});
</script>
</html>

转载于:https://www.cnblogs.com/sharing1986687846/p/7520812.html

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。