【问题标题】:Playing Video jquery plugin [closed]播放视频 jquery 插件 [关闭]
【发布时间】:2014-06-27 18:12:47
【问题描述】:

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

  1. 开源且免费。

  2. 在单个页面上运行多个视频(必须)。

  3. 几秒钟后自动停止视频(必须)。

  4. Google 广告感知功能(可选)。

  5. 在视频中间附加 HTML,以便用户能够点击 HTML 中给出的链接(必须)。

  6. 应该支持 YouTube 视频(必须)。

  7. 还应包括播放/暂停/全屏基本功能。

  8. 良好的文档。

【问题讨论】:

  • 来自题外话标记菜单:Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow
  • 我关心的不是你找到插件/工具。我担心的是,如果你们开发过任何包含所有这些功能的库,请参考我。我已经研究过,但找不到更好的解决方案。所以只是想要一些强有力的技术答案。谁真正解决了同样的问题并定制了库。
  • @admdrew 如果您觉得自己不能或不想回答该问题,请不要记下该问题。我已经看到很多关于相同的问题,并且大多数人都参考了最好的知识。 Stackoverflow 声誉对某些人来说并不重要。请让其他人感兴趣。希望你能理解这个问题。
  • 我没有对这篇文章投反对票,我只是将其标记为关闭。您说您只是希望有人向您推荐一个工具,这与主题无关(“...要求我们推荐...”)。
  • @admdrew,很抱歉给你写同样的信。我只需要建议。我只想为那些投反对票的人写文章

标签: jquery jquery-plugins html5-video


【解决方案1】:

flowplayer 是一个可以满足所有需求的插件,我们可以设置 cupoint 在一秒钟后停止视频,并且可以使用插件来附加可点击的 html,如下所示。将此代码添加到带有视频 url 的 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>

【讨论】:

    猜你喜欢
    • 2011-02-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-09-04
    • 1970-01-01
    相关资源
    最近更新 更多