Sow nothing reap nothing

WMV视频文件在网页中播放解决方法

已有7,498次关注

最近在公司产品开发中过程中遇到以下问题:
产品平台界面上需要显示当前设备上传的视频文件,而设备上传的视频文件格式是WMV,想想也是醉了,现在居然还有设备厂家在用WMV。
当把这个需求放在手中的时候,尝试了很多方法,包括使用object、embed、video网页原生标签都达不到效果,后续更是尝试了包括cuplayer、ckplayer、jplayer等等很多插件及视频播放器。

网页中显示的效果图如下:
网页中播放WMV视频文件.png

最终在搜索引擎中发现了JWPlayer,然而官方网站并没有介绍如何使JWPlayer支持播放wmv,又只有各种通过搜索引擎的方式来找相关资料,经过多方翻墙资料的搜集,有了如下解决方案。

要JWPlayer使支持WMV的播放,必须有以下文件:

silverlight.js
wmvplayer.js
wmvplayer.xaml

在网页页面中需要引入如下js文件:

jwplayer.js 
silverlight.js 
wmvplayer.js

配置播放方式如下:

var elm = document.getElementById("myElement");  
var src = 'wmvplayer.xaml';  
var cfg = {   
    file: 'myVideo.wmv',   
    image: 'preview.jpg',                       //封面   
    logo: 'wmv_logo.png',                   //视频logo
    link: 'http://www.angbike.com',                 //logo的链接   
    linktarget: '_blank',                   //新页面打开链接   
    width: '500',                       //播放器显示宽度
    height: '340',                       //播放器显示高度
    autostart: 'true',                       //自动播放
    start:'10',                           //从第几秒开始播放   
    backcolor: '000000',                       //背景颜色   
    frontcolor: 'FFFFFF'                       //字体颜色  
}; 
var ply = new jeroenwijering.Player(elm,src,cfg); 

示例代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>WMV播放测试</title>
</head>
<body>

<div id="mediaplayer"></div> 

<script src="js/jwplayer.js"></script>
<script src="js/silverlight.js"></script>
<script src="js/wmvplayer.js"></script>

<script type="text/javascript">
    var elm = document.getElementById("mediaplayer");  
    var src = 'js/wmvplayer.xaml';          //xaml文件路径
    var cfg = {   
        file: 'wmv/Robotica_720.wmv',       //wmv文件路径
        width: '500',                  //宽度 
        height: '340',               //高度
        autostart: 'false',               //自动播放
        start:'0',                   //从第几秒开始播放   
        backcolor: '000000',               //背景颜色   
        frontcolor: 'FFFFFF'               //字体颜色  
    }; 
    var ply = new jeroenwijering.Player(elm,src,cfg);
</script>

</body>
</html>

最后一步,需要安装微软银光Microsoft Silverlight插件,下载安装完成之后重启或者刷新浏览器就可以看到效果。
微软银光Microsoft Silverlight下载地址:
http://www.microsoft.com/getsilverlight/get-started/install/default?reason=unsupportedbrowser&_helpmsg=ChromeVersionDoesNotSupportPlugins&v=1.0#sysreq

最后来看看如何获取wmv视频的播放时间,下面是一个简单的介绍:
wmvplayer.js中包含一个方法timeChanged(),每一秒钟都会执行一次,这里记录着时间的更替,也就是说,我们只要在这里面获得它所记录到的时间并返回就可以了。

下面对wmvplayer.js进行二次编程修改:

1、在jeroenwijering.Player的this.configuration中加入配置:

position: '0',     //二次编程加入:已播放时间 

2、在jeroenwijering.Model.prototype的goStop: function()中加入

this.intoff = true;

3、修改timeChanged: function()方法,以下为修改后的方法:

timeChanged: function() {   
    //二次编程修改   
    try{    
        var pos = Math.round(this.video.Position.Seconds*10)/10;    
        this.view.onTime(pos,this.configuration['duration']);        
        //二次编程加入:赋值已播放时间,格式化为 h:m:s    
        var runT = Math.floor(pos);    
        var minutes = Math.floor(runT/60);     //获取分钟总数    
        var seconds = runT - minutes*60;       //获取秒    
        var hour = Math.floor(minutes/60);     //获取小时数    
        minutes = minutes%60;                  //获取分钟    
        this.configuration['position'] = hour + ":" + minutes + ":" + seconds ;     
    }catch(err){
        return;   
    }  
} 

获取播放时间:

var playtime = ply.getConfig().position;   //ply是播放器对象,position是上面添加的配置

下载地址:https://pan.baidu.com/s/1tec9bPbOtw-YPgrbbYrYew
提取密码:d5zt
解压密码:www.yangbike.com

已自动关闭评论