m3u8 video with dynamically generated <video> tag

Question

In a HTML5/JS app (backbone.js / jQuery) i'm having trouble embedding a m3u8 video stream delivered by a wowza media server.

The app is supposed to run in mobile safari only, so the format would be allright.

The video gets embedded with a tag, generated by Javascript.

<video src="http://someotherdomain.net:[customport]/path/playlist.m3u8" controls>
</video>

When embedding the video tag with a test stream-URL in a static test page, the video works perfectly up and down all tested iOS Versions.

The Problem is when generating the tag with JS, the video stalls in loading state.

Desktop Safari however plays the video just fine.

I couldn't figure out what's causing this so far. Could this be some security restriction on the mobile browser?

UPDATE

as this is some closed and rather complex app i'm unfortunately not able to provide a non-working example, but this is the method that renders the video tag into the page:

/**
 * add <video> tag and add source
 *
 * @param src
 */
loadVideoSource: function (src) {

    this.$el.find('video').remove();

    $('<video/>')
        .attr('src', src)
        .prop('autoplay', true)
        .prop('controls', true)
        .css('width', '100%')
        .css('height', '60%')
        .appendTo(this.$el.find('div.video'));

}

that port does work and renders the following markup:

<video 
    src="https://somedomain.com.tr:1935/live/12345678/playlist.m3u8" 
    autoplay 
    controls 
    style="width: 100%; height: 60%;"
></video>

i also tried initially having the video tag in the page an just adding the src attribute or <source> child. I also tried to call load() and play() explicitly on the video element but that didn't help either...

Answer 1

ok, after hours of debugging it simply turned out to be a CSS bug :P

Since you have to start a video explicitly in iOS, you'll have to press the play button in the video after loading the markup.

Strangely enough, this was prevented by

-webkit-overflow-scrolling: touch;

...which was used on the parent container of the video, and prevented the native play button of the video element to be clickable.

Answer 2

Hi i am posting a small snippet which i always use for video..

videoElement = document.createElement('video'); // this audioelement is  used to create an audio tag
$(videoElement )
    .attr('id', 'video');

 function videoElement_Int_fn(currentPos) {

            var src = currentPos+'.mp4';

        videoElement .setAttribute('src', src);
        videoElement .load();
        videoElement .play();
}