【问题标题】:Rails MediaElement js flv video not workingRails MediaElement js flv视频不起作用
【发布时间】:2016-06-28 00:15:14
【问题描述】:

我在视频播放器的rails应用程序中使用了MediaElement js插件。它不适用于FLV格式的视频。我收到类似这样的错误加载此资源时出错。下面看我写的代码.如何解决?

 <video width="480" height="350" controls="controls" preload="none">
      <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
    <source type="video/mp4" src="<%= @featured_video.asset.url %>" />

       <!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
    <source type="video/webm" src="<%= @featured_video.asset.url %>" />

       <!-- Ogg/Vorbis for older Firefox and Opera versions -->
    <source type="video/ogg" src="<%= @featured_video.asset.url %>" />

   Here I tried both format video/flv,video/x-flv but it is not working
    <source type="video/flv" src="<%= @featured_video.asset.url %>" />
                     or
    <source type="video/x-flv" src="<%= @featured_video.asset.url %>" />

       <!-- Flash fallback for non-HTML5 browsers without JavaScript -->
    <object width="320" height="240" type="application/x-shockwave-flash" data="<%= Rails.root %>/app/assets/javascripts/swf/flashmediaelement.swf">
      <param name="movie" value="<%= Rails.root %>/app/assets/javascripts/swf/flashmediaelement.swf" />
      <param name="flashvars" value="controls=true&file= <%= @featured_video.asset.url %>" />
    </object>
 </video>

【问题讨论】:

标签: ruby-on-rails-4 html5-video mediaelement.js


【解决方案1】:

播放 HTML5 视频我喜欢使用videojs_rails gem

这真的很容易设置,您需要做的就是:

1) 将 gem 放入你的 gem 文件中

gem 'videojs_rails'

2) 将资源添加到您的 application.js 文件中

# app/assets/javascripts/application.js
//= require video

3) 以及 application.css 文件中的资源

/*
*= require video-js
*= require_self
*/

4) 确保文件被加载到资产管道中

#config/initializers/assets.rb
Rails.application.config.assets.precompile += %w( video-js.swf vjs.eot vjs.svg vjs.ttf vjs.woff )

现在在你看来,你所要做的就是

<%= videojs_rails sources: { mp4: @featured_video.asset.ur, webm: @featured_video.asset.ur}, setup: "{}", controls: false, width:"400" %>

我希望这会有所帮助。

快乐的黑客

【讨论】:

    猜你喜欢
    • 2013-12-09
    • 2012-02-02
    • 2018-04-01
    • 2011-07-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-08-26
    相关资源
    最近更新 更多