JWplayer 用法及参数介绍（一）

最新推荐文章于 2024-05-12 09:36:00 发布

keji_123

最新推荐文章于 2024-05-12 09:36:00 发布

阅读量3.1k

点赞数

分类专栏：平时学习笔记项目总结

本文链接：https://blog.csdn.net/keji_123/article/details/78951141

版权

平时学习笔记同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

项目总结

12 篇文章 0 订阅

订阅专栏

JWPlayer的使用入门

这里使用JWPlayer，需要搭建网络环境（phpStudy）

JWPlayer官网http://www.longtailvideo.com/

JWPlayer下载页面http://www.longtailvideo.com/jw-player/download/

解压后，将jwplayer整个文件夹放到appserv/www目录下

新建html文件

<html>
<head>
<script src="/jwplayer/jwplayer.js"></script>
</head>
<body>
<div id='myplayer'></div> <script type='text/javascript'>    
 jwplayer('myplayer').setup({       
 file: 'testfile/H264_640x480_AAC(LC).mp4',       
 width: '640',        
 height: '480'     }); 
</script>
</body>
</html>

file参数根据自己实际情况进行修改
在浏览器中打开就可以观看了（直接打开无效，localhost打开）

如：http://127.0.0.1/jwplayer/test.html

2.利用jquery 加一些控制

jquery是一个javascript框架，是一个轻量级的js库，可以下载到本地。具体应用请google

<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="/jwplayer/jwplayer.js"></script>
</head>
<body>
<div id='myplayer'></div>
<input type="button" class="player-play" value="Play" />
<input type="button" class="player-stop" value="Stop" />
<input type="button" class="player-status" value="Status" />
<input type="button" class="player-position" value="TimeStamp" />
<input type="button" class="player-seek" value="Seek_15s" />
<input type="button" class="player-duration" value="Duration" />
<script type='text/javascript'>
 var thePlayer;
 thePlayer = jwplayer('myplayer').setup({   
 file: 'testfile/H264_640x480_AAC(LC).mp4',       
 width: '640',        
 height: '480',
 dock: false,
 repeat: true}); 

 //Play Pause
 $('.player-play').click(function(){
    if(thePlayer.getState() != 'PLAYING'){
        thePlayer.play(true);
        this.value = 'Pause';
    }else {
        thePlayer.play(false);
        this.value = 'Play';
    }
    });

 //Stop
 $('.player-stop').click(function(){thePlayer.stop();});

 //Status
 $('.player-status').click(function(){
    var state = thePlayer.getState();
    var msg;
    switch(state){
        case 'BUFFRING':
            msg = 'Buffering';
            break;
        case 'PLAYING':
            msg = 'Playing';
            break;
        case 'PAUSED':
            msg = 'Pause';
            break;
        case 'IDLE':
            msg = 'Stop';
            break;
        }
        alert(msg);
    });

    //get current position
    $('.player-position').click(function() { alert(thePlayer.getPosition()); });

    //Seek
    $('.player-seek').click(function(){
        if(thePlayer.getState()!= 'PLAYING'){
        thePlayer.play();
        }
        thePlayer.seek(15);
    });

    //get duration
    $('.player-duration').click(function() {alert(thePlayer.getDuration());}); 

</script>
</body>
</html>

thePlayer.seek(15)这个我在chrome浏览器下测这个方法没有用，不知道是不是我自己的问题，没有找到解决的办法。

未完待续… …

keji_123

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
JWplayer 用法及参数介绍（一）

JWPlayer的使用入门这里使用JWPlayer，需要搭建网络环境（phpStudy）JWPlayer官网http://www.longtailvideo.com/JWPlayer下载页面http://www.longtailvideo.com/jw-player/download/解压后，将jwplayer整个文件夹放到appserv/www目录下新建html文件<html><head>
复制链接

扫一扫