JwPlayer播放器【去除Logo、去除版本信息】

最新推荐文章于 2025-09-09 08:37:13 发布

weixin_30809173

最新推荐文章于 2025-09-09 08:37:13 发布

阅读量175

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/czrwxw/p/4024475.html

本文提供了一个使用JwPlayer播放器加载并播放视频的完整指南，包括如何输入RTMP服务地址、视频名称以及相关交互操作。通过简单的HTML代码实现视频播放控制，包括载入、播放、暂停、停止和跳转等功能。

效果图：

jwplayer效果图

<html>
<head>
<title>JwPlayer播放器@杯中红茶</title>
<script type="text/JavaScript" src="jwplayer.js"></script>
</head>
<body>
<div id="container">Loading...</div>
<script type="text/JavaScript">
var add
var files
plays()
function check(){
add=document.getElementById("add").value
files=document.getElementById("files").value
if(add==""){
alert("请输入RTMP服务地址")
}
if(files==""){
alert("请输入视频名称")
}
if(add !="" && files !=""){
plays()
jwplayer().play()
}
}


function plays(){
jwplayer("container").setup({
flashplayer:"player.swf",
provider:"rtmp",
streamer:add,
file:files,
<!--file:add, rtmp://czr2014.xicp.net:1937/WebFiles /1/LearnKJ/002.mp4-->
height:400,
width:610,
<!--duration:10,-->
volume:10,
autostart:false,
<!--controlbar:false,-->
<!--repeat:"always",-->
controlbar:"bottom",
events: { 
onComplete: function() { alert("the video is finished!"); }
}
});
}
</script>
<p>
RTMP地址：<input type="text" id="add" name="add" style="width:530px"/><br />
视频名称：<input type="text" id="files" name="files" style="width:530px"/>
</p>
<p>
<button onclick='check()'>载入</button>|
<button onclick='jwplayer().play()'>播放</button>| 
<button onclick='jwplayer().pause()'>暂停</button>| 
<button onclick='jwplayer().stop()'>停止</button>| 
<button onclick='jwplayer().seek(60)'>跳到60秒</button>| 
<button onclick='alert(jwplayer().getPosition())'>获取当前时间</button>| 
<button onclick='alert(jwplayer().getDuration())'>获取视频总时</button>
</p>

</body>
</html>