942071 - vzaar.com says browser can't play HTML5 (MP4) video

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Hallvord R. M. Steen [:hallvors]]

Site: http://vzaar.com
vzaar.com says browser can't play HTML5 (MP4) video

:: Steps To Reproduce

Load site
See error message instead of video on right side of main page.

This affects both Firefox OS and Firefox on Android

:: Expected Result

video

:: Actual Result

no video

:: Additional Information

Software Version: 1.1
Reporter's User Agent: Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:25.0) Gecko/20100101 Firefox/25.0

Comment 1

[Mike Taylor [:miketaylr]]

Seems like the site is different now, no horizontal scroll.

Comment 2

[Mike Taylor [:miketaylr]]

Apologies, was intending this comment for another bug.

Comment 3

[Hallvord R. M. Steen [:hallvors]]

There is some hard-coded Firefox detection that tries to make sure Firefox only gets to play video through Flash:

if((!detectVideoSupport()||detectFirefox())&&(!flashVersionInstalled||!document.getElementById("h5-player-wrapper"))){

Also, they use VideoJS - and I'm pretty sure the version they have pasted into their own JS file lacks the fix that was added when bug 881072 made us contact them. Updating VideoJS should probably be their first step.

Comment 4

[Karl Dubost💡 :karlcow]

The video is included in the homepage through an iframe

<iframe allowfullscreen="" allowtransparency="true" class="vzaar-video-player" id="vzvd-1165951" mozallowfullscreen="" name="vzvd-1165951" src="http://view.vzaar.com/1165951/player" title="vzaar video player" type="text/html" webkitallowfullscreen="" frameborder="0" height="316" width="560"></iframe>


When we view the site there is a cookie which is created for view.vzaar.com
    vzFlashInstalled = true

On Firefox Desktop,
 Erasing the cookies, Changing my UA string to iphone and loading only http://view.vzaar.com/1165951/player
I receive the following message

> Your browser does not support HTML5 (mp4) video playback. If possible, please use a different browser to watch this video.

but the cookie is still 
    vzFlashInstalled = true

When going back to Firefox OS UA, removing cookies, and reloading.
I get the flash player which can't work on Firefox OS. 

The flash detection is happening in 
http://player.vzaar.com/html5player/1.0.0/src/vzaar-player.min.js
I guess the flash plugin is getting into the way somehow.

ALL of this is happening before VideoJS player it seems, starting line 230.






FlashDetect.JS_RELEASE = '1.0.4';
var flashVersionInstalled = FlashDetect.versionAtLeast(10, 2);
// Flash 10.2.0 required
document.cookie = 'vzFlashInstalled=' + flashVersionInstalled.toString();
// html5 h.264 video playback feature sniffing
var detectVideoSupport = function () {
    var detect = document.createElement('video') || false;
    this.html5 = detect && typeof detect.canPlayType !== 'undefined';
    return this.html5 && (detect.canPlayType('video/mp4') === 'maybe' || detect.canPlayType('video/mp4') === 'probably');
};
var detectFirefox = function () {
    return navigator.userAgent.match(/Firefox/i) !== null;
};
if ((!detectVideoSupport() || detectFirefox()) && (!flashVersionInstalled || !document.getElementById('h5-player-wrapper'))) {
    // no html5 h.264 support and (Flash version not installed or no Flash fallback)
    // display unsupported browser error message
    var doc = document;
    var flashFallback = (doc.getElementById('h5-player-wrapper')) ? true : false;
    var errorOverlayFragment = doc.createDocumentFragment();
    var errorOverlayText = doc.createElement('div');
    errorOverlayText.className = 'errorText';
    if (flashFallback) {
        if (!FlashDetect.installed) {
            errorOverlayText.innerHTML = 'Your browser does not support HTML5 (mp4) video playback. If possible, please use a different browser to watch this video, or <a href='http://get.adobe.com/flashplayer/'>install Flash Player</a>.<br><a href='http://get.adobe.com/flashplayer/'><div id='getFlashButton'></div></a>';
        } else {
            errorOverlayText.innerHTML = 'Your browser does not support HTML5 (mp4) video playback. If possible, please use a different browser to watch this video, or <a href='http://get.adobe.com/flashplayer/'>upgrade Flash Player</a>.<br><a href='http://get.adobe.com/flashplayer/'><div id='getFlashButton'></div></a>';
        }
    } else {
        errorOverlayText.innerHTML = 'Your browser does not support HTML5 (mp4) video playback. If possible, please use a different browser to watch this video.';
    }
    var errorOverlayDiv = doc.createElement('div');
    errorOverlayDiv.className = 'playerOverlay';
    errorOverlayDiv.appendChild(errorOverlayText);
    errorOverlayFragment.appendChild(errorOverlayDiv);
    var playerDiv;
    if (doc.getElementsByClassName) {
        playerDiv = doc.getElementsByClassName('vzaar_media_player') [0];
    } else if (doc.querySelector) {
        playerDiv = doc.querySelector('.vzaar_media_player');
    } else {
        var divElems = doc.getElementsByTagName('div'),
        i = 0;
        while (i < divElems.length) {
            if (divElems[i].className === 'vzaar_media_player') {
                playerDiv = divElems[i];
                break;
            }
            i++;
        }
    }
    playerDiv.insertBefore(errorOverlayFragment, playerDiv.firstChild);
    if (flashFallback) {
        var flashPlayerLinks = errorOverlayText.getElementsByTagName('a');
        for (var i = 0, linksLength = flashPlayerLinks.length; i < linksLength; i++) {
            flashPlayerLinks[i].onclick = function () {
                window.open('http://get.adobe.com/flashplayer/', '_blank');
                return false;
            };
        }
    }
    var loadingStatusDiv = doc.getElementById('loading_status');
    loadingStatusDiv.style.display = 'none';
} else if (!detectFirefox() && detectVideoSupport() && (!flashVersionInstalled || navigator.userAgent.match(/Android 4/) || !document.getElementById('h5-player-wrapper') || document.getElementById('h5-player-wrapper') .getAttribute('data-html5-primary'))) {
    // we aren't using the flash player, so remove it
    var flashObjectFragment = null;
    window.addEventListener('load', function () {
        var doc = document;
        var objectTag = doc.getElementsByTagName('object');
        if (objectTag.length) {
            flashObjectFragment = doc.createDocumentFragment();
            flashObjectFragment.appendChild(objectTag[0]);
        }
    });

Comment 5

[Karl Dubost💡 :karlcow]

So indeed the Mobile User Agent Strings for Firefox Android and Firefox OS will always match 

var detectFirefox = function () {
    return navigator.userAgent.match(/Firefox/i) !== null;
};

I'm trying to contact the CTO.

Comment 6

[Karl Dubost💡 :karlcow]

1st attempt at contact
http://twitter.com/MozWebCompat/status/456239395419348993

Comment 7

[Karl Dubost💡 :karlcow]

Send an email to the customer support following the answer on twitter.

Comment 8

[Adrian Sevitz]

Hi,

I've spoken to my H5 dev, and he says this should work in a new H5 player (which is still under development, but nearly done)

Can you test against it here: https://dl.dropboxusercontent.com/u/961723/vzaar-testing/vzaar-production-embed-test.html

Adrian (from vzaar)

Comment 9

[Karl Dubost💡 :karlcow]

Adrian,

I tested both Firefox OS and Firefox for Android.
And it is perfectly working. 
Wonderful work.

Comment 10

[Adrian Sevitz]

Great. This should be released next month or soon after.

IT's currently in s staged roll out.

Comment 11

[Karl Dubost💡 :karlcow]

Tested on a Firefox OS Flame.
This is working.

Thanks a lot Adrian!