扩展jQuery Media Plugin，使它变得更完整

最新推荐文章于 2024-09-14 13:46:29 发布

wang945

最新推荐文章于 2024-09-14 13:46:29 发布

阅读量4.4k

点赞数 1

文章标签： jquery 扩展 microsoft function internet flash

本文链接：https://blog.csdn.net/wang945/article/details/5651755

版权

作为一款万能播放器插件，总能少了对媒体控制的接口呢。由是偶利用空闲时间把这个插件完善了一下。使之具体播放、暂停、停止的功能。具体实现步骤如下：

第一步：打开 jQuery.Media.js文件定义一个全局变量，用来识别当前播放器的类型

var curPlayer;//全局变量：当前播放器的类型。

第二步：为插件生成的对象创建一个ID，默认是没带ID的。先找到$.fn.media.defaults = {……}，这里面定义了一些默认参数，在这里面添加一个playerid: 'MyPlayer'。然后修改function generate这个方法，在方法里找到变量a的赋值语句，修改为var a = ['<object id="'+opts.playerid+'" width="' + opts.width + '" height="' + opts.height + '" '];

第三步：给全局变量curPlayer赋值，把当前播放器的类型赋给它。同样也是修改function generate这个方法，在方法里的第一行加入 curPlayer = player;//当前播放器的类型

以上步骤实现了插件生成的播放器对象拥有了一个ID，接下来是控制操作的实现。

第四步：为兼容IE，FF，Opera浏览器获取对播放器的ID，自定义一个方法。

第五步：播放、暂停、停止的控制功能实现。

/*播放*/
$.fn.Play = function(ObjectId){
if(ObjectId==null){
  ObjectId = $.fn.media.defaults.playerid;
}
var MovieObject = getMovieObject(ObjectId);//获取当前播放器的ID
switch(curPlayer.toLowerCase())
{
  case "flash":
  MovieObject.Play();
  break;
  case "quicktime":
  MovieObject.Play();
  break;
  case "real":
  MovieObject.DoPlay();
  break;
  case "winmedia":
  MovieObject.controls.play();
  break;
}
}
/*暂停*/
$.fn.Pause = function(ObjectId){
if(ObjectId==null){
  ObjectId = $.fn.media.defaults.playerid;
}
var MovieObject = getMovieObject(ObjectId);//获取当前播放器的ID
switch(curPlayer.toLowerCase())
{
  case "flash":
  MovieObject.StopPlay();
  break;
  case "quicktime":
  MovieObject.Stop();
  break;
  case "real":
  MovieObject.DoPause();
  break;
  case "winmedia":
  MovieObject.controls.pause();
  break;
}
}
/*停止控制*/
$.fn.Stop = function(ObjectId){
if(ObjectId==null){
  ObjectId = $.fn.media.defaults.playerid;
}
var MovieObject = getMovieObject(ObjectId);//获取当前播放器的ID
switch(curPlayer.toLowerCase())
{
  case "flash":
  MovieObject.Rewind();
  break;
  case "quicktime":
  MovieObject.Rewind();
  break;
  case "real":
  MovieObject.DoStop();
  break;
  case "winmedia":
  MovieObject.controls.stop();
  break;
}
}

第六步：调用实例

<html>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.media.js"></script>
<title>Demo</title>
<body>
<a href="demo.swf"
   class="media {width: 450, height: 250, caption: false }">
   Watch my movie!</a><br/>
   <a href="#" onClick="$('a.media').Play();">Play</a>
   <a href="#" onClick="$('a.media').Pause();">Pause</a>
<br/>

说明：如果页面中需要放置一个以上的视频，实例如下：

创建$('a.media').media({playerid:'myflash'});

控制 <a href="#" onClick="$('a.media').Pause(‘myflash’);">Pause</a>

第一次写博客，表达的不好，请见谅。本章示例下载http://download.csdn.net/source/2432977