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