您的位置：首页 > 其它

JW Player 网页媒体播放利器播放视音频

2015-01-31 15:29 330 查看

JW Media Player是一个开源的在网页上使用的Flash视频、音频以及图片播放器，支持 Sliverlight 播放，可以通过一个XML文件使播放器自动切换显示一组图片，并播放背景音乐。

它支持播放的Adobe Flash Player和HTML5浏览器可以处理任何格式（FLV文件，H.264标准，MP4功能，VP8的，WEBM，支持MP3，AAC，JPG，PNG和GIF）。它也支持各种流和播放清单格式（包括RTMP协议，HTTP直播和更多）和多种播放选项。并支持所有主要的CDN和自适应比特率切换意味着你可以在全球各地提供高质量的内容。

JW Player是一个先进的视频平台，您可以进行自定义和扩展：

无需特殊工具，你可以编辑文本创建图像，然后你可以建立一个皮肤。

它的插件架构和 JavaScript API让您可以轻松地扩展它的功能，融入您的网站，或连接到第三方服务。

创建媒体提供商的能力意味着您可以连接到自己的专有CDN或内容服务器。

【1】需要使用的js文件

【开源的，可以自行下载】--(网上的JwPlayer的很多版本都有问题，所以下载时，多下载几个版本，只要可用为止)

1) jQuery -- jquery-1.6.2.js

2) JwPlayer

【2】文件播放的HTML定义如下:

<html>

<!--引用必要的js文件-->
<head>
<title>在线播放器</title>
<script src="js/jquery/jquery-1.6.2.js" type="text/javascript"></script>  
<script src="js/plugins/jwplayer/jwplayer.js" type="text/javascript"></script>
</head>

<body>

<!--html结构-->
<div id='container'>Loading the player...</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="转到第30秒播放" />
<input type="button" class="player-length" value="视频时长(秒)" />

<!--初始化播放器-->
<script type="text/javascript">  
        var thePlayer;  // 保存当前播放器以便操作
        $(function() {  
        thePlayer = jwplayer('container').setup({           
            flashplayer: 'js/plugins/jwplayer/jwplayer.swf',  
            file: 'js/plugins/jwplayer/video.mp4',   
            image:  'js/plugins/jwplayer/preview.jpg',    
            width: 1280,  
            height: 720,  
            title: 'Hkfy.Com',
            repeat: "always",
            aspectratio: "16:9",
            dock: false  
        });  
          
        // 播放 暂停  
        $('.player-play').click(function() {  
            if (thePlayer.getState() != 'PLAYING') {  
                thePlayer.play(true);  
                this.value = '暂停';  
            } else {  
                thePlayer.play(false);  
                this.value = '播放';  
            }  
        });  
          
        // 停止  
        $('.player-stop').click(function() { thePlayer.stop(); });  
          
        // 获取状态  
        $('.player-status').click(function() {  
            var state = thePlayer.getState();  
            var msg;  
            switch (state) {  
                case 'BUFFERING':  
                    msg = '加载中';  
                    break;  
                case 'PLAYING':  
                    msg = '正在播放';  
                    break;  
                case 'PAUSED':  
                    msg = '暂停';  
                    break;  
                case 'IDLE':  
                    msg = '停止';  
                    break;  
            }  
            alert(msg);  
        });  
          
        // 获取播放进度  
        $('.player-current').click(function() { alert(thePlayer.getPosition()); });  
  
        // 跳转到指定位置播放  
        $('.player-goto').click(function() {  
            if (thePlayer.getState() != 'PLAYING') {    // 若当前未播放，先启动播放器  
                thePlayer.play();  
            }  
            thePlayer.seek(10); // 从指定位置开始播放(单位：秒)  
        });  
          
        // 获取视频长度  
        $('.player-length').click(function() { alert(thePlayer.getDuration()); });  
        
    });  
</script>  

</body>
</html>

【3】网页打开效果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航