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...
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.