CODEWITHSUNDEEP
google-chromefirefoxhtml5-videovideo.js
user3159403
user3159403

Reputation: 11

Videojs only working on mobile, not on PC

I have a rather peculiar problem.

I made a website, that streams from various sources, all m3u8 links (Apple HLS). I successfully made it using a viewright player but I wanted to support mobile devices so I set it up with videojs - and it works perfectly. With the current setup people have to install a viewright plugin, which is fine, but I want to avoid that by using html5 and make it more userfriendly.

I have tried both using CDN and Self-hosting as described here: https://github.com/videojs/video.js/blob/v4.3.0/docs/guides/setup.md My videojs related code is as follows:

head:

<link href="//vjs.zencdn.net/4.2/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.2/video.js"></script>

Body:

<div class="row">
<div class="span7">
<video id="vid" class="video-js vjs-default-skin" 
controls preload="auto" width="640" height="640" 
poster="my_video_poster.png"
data-setup="{}">
</video>
</div>

    <script>
    var myPlayer = _V_('vid');
    function changeChannel(url, chanid)
    {
    myPlayer.src(url);
    myPlayer.play();
    }
    </script>

In body there is also the list of streams, ofcourse. When you click on a link it changes to that stream.

Example:

<a href="javascript:changeChannel('http://link.to.stream.m3u8', 0);">StreamName</a>

Again - the code works perfectly on my android phone (chrome) and iphone (safari) so I'm utterly confused by this.

Thanks if you know something!

edit:

In the console, when loading the page it says ReferenceError: V is not defined and when I load a stream it says: TypeError: myPlayer is undefined

I tried replacing V with videojs and VideoJS (as found on other SO post) but it just said that videojs/VideoJS was not defined then.

Upvotes: 1

Views: 3561

Answers (2)

user3381503
user3381503

Reputation: 31

There are some additions to video.js that will get it to play HLS content on desktop browsers.

Check out the flashls project on github, which for videojs uses a modified swf file available here under the video-js-swf project on github.

Also check out this version which is Javascript based: https://github.com/videojs/videojs-contrib-hls

Upvotes: 2

Tchakabam
Tchakabam

Reputation: 505

First off, Apple HLS is not supported by the major desktop browsers, namely Chrome, Firefox and IE (I dont know about Opera but I doubt it). Safari on OSX supports it, Safari on Windows does not :)

Chromium and Firefox teams both have open tickets on implementing support for HLS through the HTML5 video tag, but I don't think this is going to happen soonish (Firefox has this ticket open since 3 years now ;) ). Remember that Apple HLS is in no way directly part of the HTML5 standard. The only widely supported formats are WebM / MKV / Ogg, using VP8 / Theora codec (since they are supported by both FF and Chrome).

Mobile devices running iOS with Safari therefore support HLS, and so does Chrome on iOS, since it is actually using a Safari WebKit pane to render the HTML. Also, the browser that comes with Android supports HLS (and so does the Android media framework natively), as Android developers were obviously concerned about matching compatibility with iOS enabled mobile sites.

However, Chrome (and IE) support also the MPEG-4 / H.264 codec.

IE support ONLY MP4.

Videojs has a fallback solution in Flash that is replacing the video tag when you want to player MPEG-4 on Firefox. So that is taken care off, at least.

Welcome to video streaming standards madness.

That said, you will probably have to review your video delivery strategy if you want to deliver to other desktop browser than only Safari on OSX ;) If you are using Videojs anyway , I would recommend you MPEG-4, as then you will have full browser compatibility.

However, knowing Videojs, I would say that it should throw an appropriate error when it encounters a format that is not supported on the platform.

Therefore, I think your problem is (not only) format related? Try to load any other WebM example file into your Videojs setup on Chrome or FF desktop browsers to see if that works. If it does, then obviously M3U8 / HLS format is messing up Videojs on desktop, and that would be a Videojs ticket. But, anyway, HLS wont work on desktop any way, for now.

Upvotes: 1

Related Questions