Search code examples
htmlmacosvideocaptiveportal

HTML5 Video not showing on Mac OS X (Desktop) CNA (Captive Network Assistant)

I'm building a captive portal for free wifi access. When user connects, the CNA pops up in the screen where my portal is loaded.

Problem: HTML5 video is not being displayed in OS X desktop. Even iPhone can show it, desktop doesn't. I cannot even inspect anything in this evil browser (can it be called a browser? I don't think so).

My video code:

<video id="promo-video" height="100%" width="100%" preload="auto" autoplay="" muted="" webkit-playsinline="" playsinline="">
  <source src="externalUrlToVideo" type="video/mp4">
</video>

Remember, this very same code shows video on iOS (but doesn't autoplay... for now it's a minor problem).

Some screenshots* that may help some. Video should be played in the right column: CNA doesn't loads video CNA doesn't loads video

What happens when I right-click video then click "Show controls" What happens when I right-click video then click "Show controls"

Also, when I right-click then click "Open video in a new window", it shows only a video player, but nothing to be showed in it. Obviously, play button doesn't make it work...

Solution

  • You could try adding the type="" attribute to the source. Include the video MIME-type there, e.g. 

    type="video/mp4"

    Also, I don't think video will autoplay on iOS. Historically it has prevented auto-playing because of data charges for downloading video content. I'm not sure if I recently read somewhere that was changing. From a user perspective it's arguably unfair to hammer their data allowance with auto-playing videos even if the aesthetic or UX is improved by it.