What you need:
– Basic knowledge in HTML and CSS.
– A Mac and Xcode (no programming skills required) for exporting the app.

Video

Insert video by using the standard HTML5 markup. Videos are always stretched to the size of the column. Safari and Chrome support .mp4 files, but Firefox does not. You have to convert the video to the “ogg-format” to get the video working in Firefox. There are a lot of video conversion tools out there. MiroVideo Converter for example is free and simple. For detailed information about video see http://diveintohtml5.info/video.html.

Autoplay is now also supported and configured via the book.json-file.

The following markup includes both filetypes. The browser decides which one to use:

<video controls preload>
   <source src="images/myvideo.mp4">
   <source src="images/myvideo.ogv“ type="video/ogg">
</video>

Laker is now on github! Please discuss issues, suggestions or tipps in the github forums of Laker. Thanks! ;)

22 Responses to “Video”

  1. you can autoplay videos by using javascript on load.

  2. According to my research, thats not possible in the latest iOS-Versions. BUT Baker 2.0 provides enabling autoplay by defining a constant (MEDIA_PLAYBACK_REQUIRES_USER_ACTION). If set to NO, autoplay works by simply adding “autoplay” to the html video tag. I’ll update Laker in the next couple of days and this section.
    florian

  3. Hi,

    I am trying to include a video which is not present on YouTube. Could you please explain to me how I would go about achieving this.

    Thanks

  4. Hey Mitesh,
    you’re in the right section. This is how it’s done.

  5. I have put the code above to replace the code which was to bring up the youtube video but it does not show the video, it just shows a blank space.

    Is there something I am missing?

  6. check your videoformat and the videosize. There is a maximum dimension limit on the iphone. And: Did you tested it on the actual device?

  7. Hey Florian, any idea how I can change the size of the video player? I use mp4 video and like to place it in the text and also centering. Video is 510 x 288. Now the video is very small and has black borders on the left / right side.

    type=”video/mp4″>

  8. Hey Axel,
    you must modify the CSS-Styles to accomplish that.
    A good place for that would be in media.css.
    Cheers,
    Florian

  9. Hi Florian,

    I am modifying the book to play and try to make it work for a project. I tried the above video code and pointed it to the images folder using an .mp4. Here is what is happening in different apps. Safari shows the controller but blank for where the video is supposed to load. On iPad simulator it shows no controller and a black box for the video. Any ideas what I am missing?

    Thanks,
    Deon

  10. Found the issue. Video format was mp4 but not the correct encoding of mp4. Above code works fine on ipad.
    Thanks,
    Deon

  11. Hello Florian,

    I saw that you use fullscreen videos inside your own iPad magazine “zuviel”. Could you be so kind to tell us how you programed it?

    Thank you for your help :)

  12. https://github.com/ffranke/Laker-Compendium/issues/22#issuecomment-1699411

  13. HEllo, how can i make a button on the main images to play a video?
    thank you

  14. Hello Florian,
    Do you know how to embed a video (full page) before a page that displays once played a page? Do you have a link that explains how?

    Thank you!

  15. “For detailed information about video see http://diveintohtml5.org/video.html.”

    FourOhFour… Hmm. :(

  16. fixed it, thanks!

  17. Hi Florian, I’m having trouble getting the video to work. I copied the code above (with the path changed to my videos) and I’ve tried using the sample videos here: http://support.apple.com/kb/HT1425 both the first one and the third one and all I’m getting is a black box. I also tried re-encoding the sample files using the iPad setting using Handbrake but that doesn’t work. Is there something I’m missing?

    I also wanted to add that when I try running your sample files, the youtube video also doesn’t work.

  18. Did you tried it in the simulator or on an actual iPad? The simulator is sometimes a bit strange and does not display video correctly.

  19. I’ve been testing it on the actual iPad, through Xcode.

  20. Hm, strange, and you encoded the video in mp4 format? I did my conversions with the miro video convertert and it worked quite nice.

  21. I reconverted the video with the Miro Video converter and the video was playing with a weird green overlay. I restarted the iPad and it seems to be playing normally now.

    Thanks! :D

  22. Hi, do anyone have any idea how to play a hidden video when the device is on landscape mode and close it when is back to portrait? I’ve managed to autoplay the video as soon as I put the iPad on landscape but haven’t manage to close and hide it as I turn back to portrait.

Leave a comment, suggestion or question.

You must be logged in to post a comment.