html5 video streaming

Question

I am working to stream a video screencast on our cakephp site using mediaViews and html5. I am using videojs for the player and am running into a few problems:

Will not stream in safari/ipad/iphone (I have it converted into an mp4)
Does not allow the viewer to skip to the middle of a video in any browser. They must watch the video straight through start to finish, which is not ideal.
Is not falling back to the flash object for browsers that don't support html5

It currently streams correctly on Chrome and Firefox. I have not tried IE yet.

Code is below. All conversions of the video file were done using Miro Video Converter which I read should work well.

Any help is very appreciated!

Students Controller Code

function view_demo_mp4() {
    $this->viewClass = 'Media';
    $params = array(
        'id' => 'webinar.mp4',
        'extension' => 'mp4',
        'path' => APP . "../../documentation" . DS,
        'download' => false,
        'cache' =>true
    );
    $this->set($params);

}

function view_demo_webm() {
    $this->viewClass = 'Media';
    $params = array(
        'id' => 'webinar.webm',
        'extension' => 'webm',
        'path' => APP . "../../documentation" . DS,
        'download' => false,
        'cache' =>true
    );
    $this->set($params);
}

function view_demo_ogg() {
    $this->viewClass = 'Media';
    $params = array(
        'id' => 'webinar.ogv',
        'extension' => 'ogv',
        'path' => APP . "../../documentation" . DS,
        'download' => false,
        'cache' =>true
    );
    $this->set($params);
}

View

<video class="video-js vjs-default-skin" controls preload="none" width="768" height="432"
     poster="/files/demo_splash.png"
     data-setup="{}">
        <source src="/students/view_demo_mp4" type='video/mp4' />
        <source src="/students/view_demo_ogg" type='video/ogg' />
        <source src="/students/view_demo_webm" type='video/webm' />
 </video>

I have three versions of the the video. The original was created using Quicktime Screen Recording. I am currently using:

Mp4 H.264, Audio channels: 2 Total bit rate 320
Ogv HTML5 Video (Ogg) I don't see any further details
WebM HTML% Video webm (again, no more details that I can find)

When using the Miro converter to convert the video I am using the far right option "Format", selecting "Video" and then the output type.

This is on an https site, so perhaps that could be causing problems with the flash fallback? Other than that I didn't see any instructions on videojs to help set up the fallback. Am I missing something?

Many thanks for any help.

Have you tested just playing the video back in a very simple page that just contains a <video> source and nothing else. You should be able to jump anywhere on the scrubber (though there will be some buffering time depending on the browser/server combination) — Offbeatmammal

Edgar Huang Edgar Huang · Accepted Answer · 2013-05-24T01:47:33

If your HTML5 video does not play on any Apple handheld devices, try encoding the mp4 version by yourself in Adobe Media Encoder. Make sure that, under the Video tab, choose a level that is 4 or lower, definitely choose Baseline for Profile, and show a bit rate that is lower enough, such as between 1000kbps and 2000kbps (The default is usually at 20000kbps.).

html5 video streaming

1 Answers