Javascript interaction


原文地址 翻译:孙小二 QQ:176300676 MSN(EMAIL):sunboyu@gmail.com

FLV Media Player和Image Rotator都有一套api接口用来发送和接受数据.低下用FLV Media Player为例,来介绍这些接口特性.Rotator同样适用这些接口.注意:这些接口只能运行在Flash Plugin 8以上版本,由于安全机制,只能在线运行.

设置播放器 Hello World

在设置播放器之前,你需要给播放器一个ID,并且使其支持js参数.实现代码如下:

  1. <script type="text/javascript" src="/JsPlayer/mediaplayer-3-16/swfobject.js"></script>
  2. <div id="container">This text will be replaced</div>
  3. <script type="text/javascript">
  4. var so = new SWFObject('/JsPlayer/mediaplayer-3-16/mediaplayer.swf','jstest','400','220','8');
  5. so.addParam('allowscriptaccess','always'); so.addParam('allowfullscreen','true');
  6. so.addVariable('width','400');
  7. so.addVariable('height','220');
  8. so.addVariable('file','/JsPlayer/mediaplayer-3-16/video.flv');
  9. so.addVariable('javascriptid','jstest');
  10. so.addVariable('enablejs','true');
  11. so.write('container');
  12. </script>

查看演示1

在这个例子里,我们使这个swf的对象的enablejs属性为true,然后传给id为jstest的播放器.在包含swfobject.js文件的时候,可以直接包含,但我用了绝对路径.下边的事情就是用js跟播放器打交道了:)

发送和接收数据

现在我们只有三个函数实现回放功能

  1. <script type="text/javascript" src="/JsPlayer/mediaplayer-3-16/swfobject.js"></script>
  2. <script type="text/javascript">
  3. function sendEvent(swf,typ,prm)
  4. {
  5. thisMovie(swf).sendEvent(typ,prm);
  6. }
  7. function getUpdate(typ,pr1,pr2,swf)
  8. {
  9. }
  10. function thisMovie(swf)
  11. {
  12. if(navigator.appName.indexOf("Microsoft") != -1)
  13. {
  14. return window[swf];
  15. }
  16. else
  17. {
  18. return document[swf];
  19. }
  20. }
  21. </script>

查看演示2

上边那个函数可以发送指定的事件给播放器,比如播放和暂停.注意:在这里没有给prm参数指定值,但是其他事件需要给其具体的值.低下是所有可以传递给播放器的事件的列表(全屏的事件除外).

  • getlink, index:回到起点
  • next : 播放下一个
  • playitem, index:回到起点
  • playpause: 暂停
  • prev: 播放下一段
  • scrub, seconds: 显示当时的播放状态
  • stop: 停止
  • volume, percent:音量设置

    • 在播放器停止的时候，第二个函数自动调用，函数内你可以随意定义一些过程。如果你想定义一些过程，代码可以这么实现：

    1. function getUpdate(typ,pr1,pr2,swf)
    2. {
    3. if(typ == 'state') { alert('the current state is: '+pr1'); }
    4. };

    这里有一个完整的事件列表可以供调用：

  • item, index: 当前播放的影片
  • load, percent: 当前影片加载的百分比
  • size, width,height: 当前影片的size
  • state, index: 当前硬盘播放的状态.
  • time, elapsed, remaining: 影片剩余事件
  • volume, percent: 当前的音量

    • 注意，getUpdate()的最后一个参数是你javascriptid的参数。如果一个页面有多个播放器的时候，使用这个id区分控制的目标。如果你一个页面只有一个播放器，可以忽略这个参数。

    第三个函数是连接SWF的函数。这个函数必须有，下边是一个例子。

    查看演示3

    加载播放列表

    你可以通过js加载其他的媒体，loadFile()函数实现这个功能。函数为：

    1. function loadFile(swf,obj)
    2. {
    3. thisMovie(swf).loadFile(obj);
    4. };

    本函数第二个参数可以接受一个播放列表的对象。你可以加载一个文件(e.g. {file:'/upload/afraid.flv}) 或一个播放列表(e.g. {file:'http://blip.tv/?1=1&s=posts&skin=rss'}), 甚至flv文件加图片加列表的方式(e.g. {file:'/upload/corrie.flv', image:'/upload/corrie.jpg', captions:'/upload/corrie.xml'}). 底下是例子。

    查看演示4

    播放列表控制

    最后一个函数是关于播放列表的控制

    1. function getLength(swf) {
    2. var len = thisMovie(swf).getLength();
    3. };
    4. function addItem(swf,obj,idx) {
    5. thisMovie(swf).addItem(obj,idx);
    6. };
    7. function removeItem(swf,idx) {
    8. thisMovie(swf).removeItem(idx);
    9. };
    10. function itemData(swf,idx) {
    11. var obj = thisMovie(swf).itemData(idx);
    12. };

    The getLength() function simply returns the number of items the playlist contains. getLength()函数返回播放列表的元素长度。

    addItem()添加一个元素至播放列表，如果参数缺省，则追加到列表尾。增加的元素只要符合loadFile()的要求即可。

    removeItem()可以从播放列表中删除一个元素，参数缺省的话，则默认删除最后一个。如果要删除的元素正在播放中，则先删除。而如果播放列表中只有一个元素，则函数执行失败。

    With the itemData() function, you can request an obj that contains all properties of the current playlistitem. This is especially useful to display content of the playlist (title, author, link, etc) in HTML. Once again, the same properties as loadFile(), addItem() and the playlists are supported. itemData()函数 In action: