- <!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>
- <!-- jwplayer播放器的key是在官方網站註冊之後纔會給的,沒有這個key就不能使用播放器,下面是我申請的key -->
- <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>
jwPlayer播放器使用方法和參數
找一個相對比較好點的播放器,國內的ckpkayer用的多,但是bug也很多,國外知名的jwplaye播放器很出名,比如慕課網使用的就是jw播放器,看了官方的文檔之後簡單的操作進行了記錄。
HTML代碼:
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.