Question

哪种jquery插件最适合播放具有以下功能的视频。

开源并免费。
在单页上运行多个视频（必须）。
几秒后自动停止视频（必须）。
Google广告感应功能（可选）。
在视频中间附加HTML，以便用户可以点击HTML（必须）中提供的链接。
应支持YouTube视频（必须）。
播放/暂停/全屏基本功能也应包括。
良好的文档。

Answer 1

flowplayer是一个插件，可以用来满足所有要求，我们可以设置cupoint在一秒钟后停止视频，并且可以使用插件附加可点击的html，如下所示。使用视频的网址在rails html文件中添加此代码。

<script type="text/javascript" src="http://releases.flowplayer.org/js/flowplayer-3.2.13.js"></script>

<div id="example7" style="width:300px;height:300px;"></div>
<div id="show-text">
  <a href="http://www.google.com"><b>Click here to continue</b></a>
</div>

<script type="text/javascript">
  $(document).ready(function(){
    $("#show-text").hide()
  });

  $f("example7", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf", {
      clip: {
          url: '/system/videos/lesson_uploads/000/000/069/original/Tom_and_Jerry_Cartoon.mp4',
          autoPlay: false,
          autoBuffering: true,
          // set cue point
          onCuepoint: [[30000], function(clip, point) {
            $f().stop()
            var plugin = this.getPlugin("content");
            plugin.show(10000).setHtml($("#show-text").html());
          }]
      },

      // set up content plugin
      plugins: {
          content: {url: 'flowplayer.content-3.2.9.swf', display: 'none'}
      }
  });

  var player = $f()

  player.onLoad(function()  {
      // this- variable points to the player's API
      // this.getScreen().animate({width:300, height:200});
  });


</script>

播放视频jquery插件

1 个答案: