Search code examples
htmlstreamingmediaelement.jswowza

Play alternative source for iPhone/iPad with mediaelement.js

I'm trying to use mediaelement.js to stream video files via a Wowza Server. Unfortunately I can only get it to work either on iPhone/iPad or in desktop browsers. I don't really know why this is, but I found out, that iPad/iPhone obviously needs a different URL to play the videos (http:// and playlist.m3u8).

This is what I got so far:

<video poster="images/dummy.jpg" controls="controls" preload="none">
    <!-- source for desktop -->
    <source src="rtmp://tv.mysite.de/mp4:movieclip.mp4" type="video/mp4" />
    <!-- source for iPad/iPhone -->
    <source src="http://tv.mysite.de/mp4:movieclip.mp4/playlist.m3u8" type="video/mp4" />
</video>

<script>
$('video').mediaelementplayer();
</script>

If I use this code, it only works in desktop browsers. When using the first source only, it doesn't work on iPhone/iPad. Same for desktop browsers if I use the second source.

Is there a way to make the magic happen for all devices/browsers? Maybe using the 2nd source as a fallback for mobile iOS or something or am I doing something wrong?

Thanks in advance!

Solution

  • Try specifying the iPad/iPhone source like this:

    <source src="http://tv.mysite.de/mp4:movieclip.mp4/playlist.m3u8" type="application/x-mpegURL" />