jwPlayer播放器使用方法和参数

﹏ヽ暗。殇╰゛Y 2022-07-15 07:25 209阅读 0赞

找一个相对比较好点的播放器，国内的ckpkayer用的多，但是bug也很多，国外知名的jwplaye播放器很出名，比如慕课网使用的就是jw播放器，看了官方的文档之后简单的操作进行了记录。

HTML代码:

**\[html\]**  [view plain][]   [copy][view plain]

1.  <!DOCTYPE html**>**  
2.  **<****html****>**  
3.  **<****head****>**  
4.   **<****title****>**jwplayer播放器测试**</****title****>**  
5.   **<****script** type="text/javascript" src="scripts/jquery-1.8.3.min.js"**>****</****script****>**  
6.   **<****script** type="text/javascript" src="scripts/jwplayer.js"**>****</****script****>**  
7.    
8.    **<****script** type="text/javascript"**>**jwplayer.key="W+FSSIJICMeqqi4MQCwmdLePq9iq8HQqiVT5dQ==";**</****script****>**  
9.  **</****head****>**  
10. **<****body****>**  
11.   
12. **<****div** id="container"**>****</****div****>**    
13. **<****input** type="button" class="player-play" value="播放" **/>**    
14. **<****input** type="button" class="player-stop" value="停止" **/>**    
15. **<****input** type="button" class="player-status" value="取得状态" **/>**    
16. **<****input** type="button" class="player-current" value="当前播放秒数" **/>**    
17. **<****input** type="button" class="player-goto" value="转到第4秒播放" **/>**    
18. **<****input** type="button" class="player-length" value="视频时长(秒)" **/>**  
19.   
20.    
21. **</****body****>**  
22. **<****script** type="text/javascript"**>**    
23.     var temp = 1;  
24.     $(function() \{    
25.   
26.   
27.   var playerInstance = jwplayer('container');  
28.   //初始化视频  
29.   playerInstance.setup(\{  
30.     //视频文件来源  
31.        file: 'scripts/video.mp4',  
32.        //显示的背景图片  
33.        image: 'scripts/bg.jpg',  
34.        
35.    \});  
36.   /\*playerInstance.on('pause',function(obj)\{  
37.   
38.    alert(obj.oldstate);  
39.   \});\*/  
40.   playerInstance.on('complete',function()\{  
41.   
42.     alert("播放完毕");  
43.   
44.   \});  
45.   //监控播放时间  
46.   playerInstance.on('time',function(obj)\{  
47.     //总时间  
48.     //alert(obj.duration);  
49.     //获取当前的播放时间  
50.     var time = obj.position;  
51.     var v1 = parseFloat(time.toFixed(0));  
52.     //不回答问题不能进行播放下面的视频  
53.     if(v1 **>** 3 && temp ==1)\{  
54.   
55.      playerInstance.seek(3);  
56.     \}  
57.     var v2 = parseFloat("3");  
58.     if(v1 == v2)\{  
59.      if(temp == 1)\{  
60.      playerInstance.pause();  
61.   
62.      var name = prompt("请输入您的名字","");  
63.      if(name == "高旭旭")\{  
64.   
65.       temp += 1;  
66.       playerInstance.play();  
67.       \}  
68.     \}  
69.    \}  
70.   \});  
71.   //点击播放执行的事件  
72.   /\*playerInstance.on('play',function()\{  
73.   
74.     var time = playerInstance.getPosition();  
75.     var v1 = parseFloat(time.toFixed(0));  
76.     if(v1 **>** 3 && temp ==1)\{  
77.   
78.      playerInstance.seek(4);  
79.     \}  
80.      
81.   \});\*/  
82.   //缓冲  
83.   /\*playerInstance.on('buffer',function(obj)\{  
84.   
85.    var name = obj.reason;  
86.    if(name == "loading")\{  
87.   
88.     alert("正在缓冲");  
89.    \}  
90.   
91.   \});\*/  
92.   //在播放之前触发的时间  
93.   playerInstance.on('playAttempt',function()\{  
94.   
95.    alert("开始播放了，是否检测登录?");  
96.      
97.   \});  
98.   //加载视频的时间  
99.   /\*playerInstance.on('firstFrame',function(obj)\{  
100.   
101.    alert("加载视频时间:"+(obj.loadTime/1000));  
102.   \});\*/  
103.   
104.   playerInstance.on('error',function()\{  
105.   
106.    alert("视频出错了...");  
107.    playerInstance.play();  
108.   \});  
109.   //停止播放  
110.   $(".player-stop").click(function()\{  
111.   
112.    playerInstance.pause();  
113.   
114.   \});  
115.   //播放  
116.   $(".player-play").click(function()\{  
117.   
118.    playerInstance.play();  
119.   \});  
120.   //获取当前播放的秒数（时间）  
121.   $(".player-current").click(function()\{  
122.   
123.    var time = playerInstance.getPosition();  
124.    alert(time);  
125.   \});  
126.   //转到多长时间  
127.   $(".player-goto").click(function()\{  
128.   
129.    playerInstance.seek(4);  
130.   
131.   \});  
132.   //获取播放状态  
133.   $(".player-status").click(function()\{  
134.      
135.    /\*\*4种状态  
136.     \* 1:没有播放 idle  
137.     \* 2：正在播放playing  
138.     \* 3:停止paused  
139.     \* 4:播放完毕complete  
140.     \*/  
141.    alert(playerInstance.getState());  
142.   \});  
143.   
144.        \});  
145. **</****script****>**    
146. **</****html****>**

![save_snippets.png][]

源码下面地址:[http://download.csdn.net/detail/gaoxuaiguoyi/9300373][http_download.csdn.net_detail_gaoxuaiguoyi_9300373]

[view plain]: http://blog.csdn.net/gaoxuaiguoyi/article/details/50042613#
[save_snippets.png]: /images/20220715/5d84f2a3c89142d38a661c70937a980f.png
[http_download.csdn.net_detail_gaoxuaiguoyi_9300373]: http://download.csdn.net/detail/gaoxuaiguoyi/9300373