HTML5 video not played in ipad

Dear Friends,

Am in process of building a video player rails application, which is compatabile to Safari, ipad, iphone device.

I have used below code to render a video and it works fine in safari. But videos are not played in ipad and iphone.

<video width="560" height="330" controls="controls" autobuffer="autobuffer">

   <source src="/videos/video.ogv" type="video/ogg" />    <source src="/videos/movie.mp4" type="video/mp4" />

</video>

I have tried changing the mime types, in config folder like,

Mime::Type.register "video/mp4", :mp4 Mime::Type.register "video/mp4", :m4v

Rack::Mime::MIME_TYPES.merge!({   ".ogg" => "application/ogg",   ".ogx" => "application/ogg",   ".ogv" => "video/ogg",   ".oga" => "audio/ogg",   ".mp4" => "video/mp4",   ".m4v" => "video/mp4",   ".mp3" => "audio/mpeg",   ".m4a" => "audio/mpeg" })

but the issue not fixed yet.

Iam using rails 3.0.0 and ruby 1.87.7

Kindly let me know what needs to be done to get videos played in ipad and iphone using HTML5 and Rails 3.

Regards, Jose

dare ruby wrote in post #971232:

Am in process of building a video player rails application, which is compatabile to Safari, ipad, iphone device.

I have used below code to render a video and it works fine in safari. But videos are not played in ipad and iphone.

<video width="560" height="330" controls="controls" autobuffer="autobuffer">

   <source src="/videos/video.ogv" type="video/ogg" />    <source src="/videos/movie.mp4" type="video/mp4" />

</video> ... ... Kindly let me know what needs to be done to get videos played in ipad and iphone using HTML5 and Rails 3.

I first have to ask for clarification: Have you actually tested that the video is actually compatible with iPad and iPhone (i.e. You've actually copied the video to an iOS device and played it back)?

I first have to ask for clarification: Have you actually tested that the video is actually compatible with iPad and iPhone (i.e. You've actually copied the video to an iOS device and played it back)?

No i have tried the same video using HTML and also using PHP it plays well in ipad and iphone. Its the same code and video thats not working in rails.

I first have to ask for clarification: Have you actually tested that the video is actually compatible with iPad and iPhone (i.e. You've actually copied the video to an iOS device and played it back)?

No i have tried the same video using HTML and also using PHP it plays well in ipad and iphone. Its the same code and video thats not working in rails.

What does the entire HTML look like?

-Conrad

dare ruby wrote in post #971390:

I first have to ask for clarification: Have you actually tested that the video is actually compatible with iPad and iPhone (i.e. You've actually copied the video to an iOS device and played it back)?

No i have tried the same video using HTML and also using PHP it plays well in ipad and iphone. Its the same code and video thats not working in rails.

also,

I have found below mimetypes,

irb(main):001:0> MIME::Types.type_for("example.m4v").to_s => "video/mp4"

irb(main):002:0> MIME::Types.type_for("example.mp4").to_s => "video/vnd.objectvideo"

Also for your reference when i tried to run like, http://localhost:3000/videos/example.mp4

It works fine in Mac safari but generates below error in iphone or ipad safari

"Cannot Play Movie Server is not configured properly"

what i need to configure apart from setting mime types like above?

dare ruby wrote in post #971390:

I first have to ask for clarification: Have you actually tested that the

video is actually compatible with iPad and iPhone (i.e. You’ve actually

copied the video to an iOS device and played it back)?

No i have tried the same video using HTML and also using PHP it plays

well in ipad and iphone. Its the same code and video thats not working

in rails.

also,

I have found below mimetypes,

irb(main):001:0> MIME::Types.type_for(“example.m4v”).to_s

=> “video/mp4”

irb(main):002:0> MIME::Types.type_for(“example.mp4”).to_s

=> “video/vnd.objectvideo”

Also for your reference when i tried to run like,

http://localhost:3000/videos/example.mp4

It works fine in Mac safari but generates below error in iphone or ipad

safari

"Cannot Play Movie

Server is not configured properly"

what i need to configure apart from setting mime types like above?

Dare, I was able to put together Rails 3.0.3 application using Ruby 1.9.2

without any issues. Furthermore, I didn’t have to play with mime type

because this handle by default in Webrick and Nginx. However, this may

not be the case with your configuration. Here’s my file:

Some Video

Good luck,

-Conrad

Conrad Taylor wrote in post #971410:

Conrad Taylor wrote in post #971410:

also, Also for your reference when i tried to run like,

Dare, I was able to put together Rails 3.0.3 application using Ruby 1.9.2 without any issues. Furthermore, I didn't have to play with mime type because this handle by default in Webrick and Nginx. However, this may not be the case with your configuration. Here's my file:

<!DOCTYPE html> <html> <head>    <meta charset="utf-8">    <title>Some Video</title> </head> <body>    <div id="demo-video-flash">       <video id="demo-video" poster="snapshot.jpg" controls>        <source src="/videos/4.mp4" type="video/mp4" /> <!-- MPEG4 for Safari -->        <source src="/videos/4.ogg" type="video/ogg" /> <!-- Ogg Theora for Firefox 3.1b2 -->       </video>    </div> </body> </html>

Good luck,

-Conrad

i have installed rails 3.0.3 and tried the above said example but same problem...

Am missing something....

Is the HTML file an ERB template that lives in the Rails views directory? What web server are you using?

-Conrad

issing something....

Is the HTML file an ERB template that lives in the Rails views directory? What web server are you using?

-Conrad

Thanks, yes its inside my views videos/list.html.erb

Just using webrick for development..

dare ruby wrote in post #971437:

issing something....

Is the HTML file an ERB template that lives in the Rails views directory? What web server are you using?

-Conrad

Thanks, yes its inside my views videos/list.html.erb

Just using webrick for development..

Would it be a lot of trouble for you to try Phusion Passenger standalone? The should give you an environment more like what you'll have in production. It would also change up your environment enough to be an interesting test.

gem install passenger cd <your project dir> passenger start

Also, just out of curiosity, have you validated the HTML 5 rendered by your app with the W3C validator?

issing something…

Is the HTML file an ERB template that lives in the Rails views

directory? What web server are you using?

-Conrad

Thanks, yes its inside my views videos/list.html.erb

Just using webrick for development…

I would recommend trying Passenger as Robert suggested.

-Conrad

Makes no sense, as long as the <video> content is displayed properly in the html that is generated, it doesn't matter if its rails, php, python, java, or anything else serving it. browsers read source code as it is. Rails has nothing to do with your video code. Here is some sample code of a basic html5 video I use with fallback support to a flash player for legacy browsers. Do some testing, first load it in an html in your public folder, if it plays fine in modern browsers, great. Then load it into a html.erb in your views folder, make sure everything is routed correctly and configured in your views/ controllers appropriately. If it will load in safari, it will load on your iphone/pad fine. The below code I've tested and used on all apple devices, android devices, safari, firefox, chrome, and even older browsers will default to the fallback flash player, send me a message if you still don't get it. Remember, it is good practice to code mp4 for webkit browsers, ogg for firefox/opera, and flash flv for IE & older browsers.

code =>

      <video width="741" height="320" controls="controls" preload="auto" poster="http://video-js.zencoder.com/oceans-clip.png&quot;

      <source src="http://video-js.zencoder.com/oceans-clip.mp4&quot; type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />       <source src="http://video-js.zencoder.com/oceans-clip.webm&quot; type='video/webm; codecs="vp8, vorbis"' />       <source src="http://video-js.zencoder.com/oceans-clip.ogv&quot; type='video/ogg; codecs="theora, vorbis"' />       <!-- Flash Fallback. Use any flash video player here. -->       <object width="741" height="320" type="application/x-shockwave- flash"         data="http://releases.flowplayer.org/swf/ flowplayer-3.2.1.swf">         <param name="movie" value="http://releases.flowplayer.org/swf/ flowplayer-3.2.1.swf" />         <param name="allowfullscreen" value="true" />         <param name="flashvars" value='config={"playlist":["http:// video-js.zencoder.com/oceans-clip.png", {"url": "http://video- js.zencoder.com/oceans- clip.mp4","autoPlay":false,"autoBuffering":true}]}' />        <!-- Image Fallback. Typically the same as the poster image. --

    <img src="http://video-js.zencoder.com/oceans-clip.png&quot; width="741" height="320" alt="Poster Image" title="No video playback capabilities." />    <!-- Download links provided for devices that can't play video in the browser. -->      <img src="http://video-js.zencoder.com/oceans-clip.png&quot; width="741" height="320" alt="Poster Image" />     <p><strong>Download Video:</strong>       <a href="http://video-js.zencoder.com/oceans-clip.mp4&quot;&gt;MP4&lt;/a&gt;,       <a href="http://video-js.zencoder.com/oceans-clip.webm&quot;&gt;WebM&lt;/

,

      <a href="http://video-js.zencoder.com/oceans-clip.ogv&quot;&gt;Ogg&lt;/

<br>

    </p>       </object>     </video>

Ben Eggett wrote in post #971865:

Makes no sense, as long as the <video> content is displayed properly in the html that is generated, it doesn't matter if its rails, php, python, java, or anything else serving it. browsers read source code as it is. Rails has nothing to do with your video code. Here is some sample code of a basic html5 video I use with fallback support to a flash player for legacy browsers. Do some testing, first load it in an html in your public folder, if it plays fine in modern browsers, great. Then load it into a html.erb in your views folder, make sure everything is routed correctly and configured in your views/ controllers appropriately. If it will load in safari, it will load on your iphone/pad fine. The below code I've tested and used on all apple devices, android devices, safari, firefox, chrome, and even older browsers will default to the fallback flash player, send me a message if you still don't get it. Remember, it is good practice to code mp4 for webkit browsers, ogg for firefox/opera, and flash flv for IE & older browsers.

code =>

      <video width="741" height="320" controls="controls" preload="auto" poster="http://video-js.zencoder.com/oceans-clip.png&quot;

      <source src="http://video-js.zencoder.com/oceans-clip.mp4&quot; type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />       <source src="http://video-js.zencoder.com/oceans-clip.webm&quot; type='video/webm; codecs="vp8, vorbis"' />       <source src="http://video-js.zencoder.com/oceans-clip.ogv&quot; type='video/ogg; codecs="theora, vorbis"' />       <!-- Flash Fallback. Use any flash video player here. -->       <object width="741" height="320" type="application/x-shockwave- flash"         data="http://releases.flowplayer.org/swf/ flowplayer-3.2.1.swf">         <param name="movie" value="http://releases.flowplayer.org/swf/ flowplayer-3.2.1.swf" />         <param name="allowfullscreen" value="true" />         <param name="flashvars" value='config={"playlist":["http:// video-js.zencoder.com/oceans-clip.png", {"url": "http://video- js.zencoder.com/oceans- clip.mp4","autoPlay":false,"autoBuffering":true}]}' />        <!-- Image Fallback. Typically the same as the poster image. --

    <img src="http://video-js.zencoder.com/oceans-clip.png&quot; width="741" height="320" alt="Poster Image" title="No video playback capabilities." />    <!-- Download links provided for devices that can't play video in the browser. -->      <img src="http://video-js.zencoder.com/oceans-clip.png&quot; width="741" height="320" alt="Poster Image" />     <p><strong>Download Video:</strong>       <a href="http://video-js.zencoder.com/oceans-clip.mp4&quot;&gt;MP4&lt;/a&gt;,       <a href="http://video-js.zencoder.com/oceans-clip.webm&quot;&gt;WebM&lt;/ >,       <a href="http://video-js.zencoder.com/oceans-clip.ogv&quot;&gt;Ogg&lt;/ ><br>     </p>       </object>     </video>

Thanks ben your code works fine in my rails application.

but when i try to change to change the video file path to read from my server, it fails again in ipad / iphone alone but works fine in mac safari.

<video width="741" height="320" controls="controls" preload="auto" poster="http://video-js.zencoder.com/oceans-clip.png&quot;

      <source src="/videos/MovieClip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />       <source src="http://video-js.zencoder.com/oceans-clip.webm&quot; type='video/webm; codecs="vp8, vorbis"' />       <source src="http://video-js.zencoder.com/oceans-clip.ogv&quot; type='video/ogg; codecs="theora, vorbis"' />       <!-- Flash Fallback. Use any flash video player here. -->

    </video>

Am missing some configuration here i believe or mime types.

Plz let me know

    </video>

Thanks ben your code works fine in my rails application.

but when i try to change to change the video file path to read from my server, it fails again in ipad / iphone alone but works fine in mac safari.

<video width="741" height="320" controls="controls" preload="auto" poster="http://video-js.zencoder.com/oceans-clip.png&quot;

      <source src="/videos/MovieClip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />       <source src="http://video-js.zencoder.com/oceans-clip.webm&quot; type='video/webm; codecs="vp8, vorbis"' />       <source src="http://video-js.zencoder.com/oceans-clip.ogv&quot; type='video/ogg; codecs="theora, vorbis"' />       <!-- Flash Fallback. Use any flash video player here. -->

    </video>

Am missing some configuration here i believe or mime types.

Plz let me know

Any suggestions plz...

Still not able to play video in ipad / iphone...

</video>

Thanks ben your code works fine in my rails application.

but when i try to change to change the video file path to read from my

server, it fails again in ipad / iphone alone but works fine in mac

safari.

<video width=“741” height=“320” controls=“controls”

preload=“auto” poster=“http://video-js.zencoder.com/oceans-clip.png

  <source src="/videos/MovieClip.mp4"

type=‘video/mp4; codecs=“avc1.42E01E, mp4a.40.2”’ />

  <source src="[http://video-js.zencoder.com/oceans-clip.webm](http://video-js.zencoder.com/oceans-clip.webm)"

type=‘video/webm; codecs=“vp8, vorbis”’ />

  <source src="[http://video-js.zencoder.com/oceans-clip.ogv](http://video-js.zencoder.com/oceans-clip.ogv)"

type=‘video/ogg; codecs=“theora, vorbis”’ />

  <!-- Flash Fallback. Use any flash video player here. -->
</video>

Am missing some configuration here i believe or mime types.

Plz let me know

Any suggestions plz…

Still not able to play video in ipad / iphone…

Hi, do you see anything in the Rails or Passenger/Apache logs?

-Conrad

Hi, do you see anything in the Rails or Passenger/Apache logs?

hi am using webrick & also mongrel.

While using passanger it works fine in ipad, the videos are not played in ipad /iphone while using webrick / mongrel.

Here is the logs....

Started GET "/videos/list" for 192.168.0.144 at Wed Jan 05 13:31:14 +0530 2011   Processing by VideosController#list as */* videoplayer_app_development['movie_topics'].find({:topic=>"Naturals"}, {}).limit(-1) Rendered nodes/_node.xml.builder (7.9ms) Rendered videos/list.html.erb within layouts/application (22.5ms) Completed 200 OK in 75ms (Views: 70.2ms)

Sorry, haven't been in the forums for a couple days.

Try creating a .htaccess file in you public directory (if its not already there) and add the following lines to it:

AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm SetEnvIfNoCase Request_URI \.(og[gv]|mp4|m4v|webm)$ no-gzip dont-vary

And whatever other mimetypes you want, those should serve it fine. I'm only suggesting this as you have had no luck with your first example in rack.

Email me if you haven't solved it and would like more help.

Ben

Email me if you haven't solved it and would like more help.

Ben

Ben , didnt get the issue fixed....

When i try in ruby console like this,

irb(main):001:0> MIME::Types.type_for("videos/big_buck_bunny.mp4").to_s => "video/vnd.objectvideo"

Its not returning mp4 format, will that affect the application...

Thanks in advance

Regards Jose Martin

Dear Friends,

Am in process of building a video player rails application, which is

compatabile to Safari, ipad, iphone device.

I have used below code to render a video and it works fine in safari.

But videos are not played in ipad and iphone.

<video width=“560” height=“330” controls=“controls”

autobuffer=“autobuffer”>

I have tried changing the mime types, in config folder like,

Mime::Type.register “video/mp4”, :mp4

Mime::Type.register “video/mp4”, :m4v

Rack::Mime::MIME_TYPES.merge!({

“.ogg” => “application/ogg”,

“.ogx” => “application/ogg”,

“.ogv” => “video/ogg”,

“.oga” => “audio/ogg”,

“.mp4” => “video/mp4”,

“.m4v” => “video/mp4”,

“.mp3” => “audio/mpeg”,

“.m4a” => “audio/mpeg”

})

but the issue not fixed yet.

Iam using rails 3.0.0 and ruby 1.87.7

Kindly let me know what needs to be done to get videos played in ipad

and iphone using HTML5 and Rails 3.

Regards,

Jose

Jose, is the complete web page online or can you post the complete template?

-Conrad