www.bestbuy.com - “Geek Squad Services” video doesn’t play

[softvision-oana-arbuzov]

URL: http://www.bestbuy.com/site/electronics/geek-squad/pcmcat138100050018.c?id=pcmcat138100050018
Browser / Version: Firefox Mobile Nightly 55.0a1 (2017-04-09)
Operating System: Android 6.0.1
Problem type: Video doesn't play

Steps to Reproduce

1. Navigate to: http://www.bestbuy.com/site/electronics/geek-squad/pcmcat138100050018.c?id=pcmcat138100050018
2. Tap “Watch a video about Geek Squad services”
3. Tap to play the video.
4. Observe behavior.

Expected Behavior:
Video plays.

Actual Behavior:
Video doesn’t play.

Note:

1. Error page is displayed javascript:%20{%20var%20vid%20=%20document.getElementById('video_1943544786');%20if%20(firstTime)%20{vid.load();%20firstTime%20=%20false;}%20if%20(vid.paused)%20vid.play();%20else%20vid.pause();%20}
2. Not reproducible on the Firefox 52.0 Release and Chrome (Mobile) 57.0.2987.132.
3. Screenshot attached.

Watchers:
@softvision-sergiulogigan
@softvision-oana-arbuzov

sv; country: us

From webcompat.com with ❤️

[karlcow]

Confirmed.
Moving to needsdiagnosis.

[karlcow]

The URL bar shows

javascript: { var vid = document.getElementById('video_1943544786'); if (firstTime) {vid.load(); firstTime = false;} if (vid.paused) vid.play(); else vid.pause(); }

<div style="position:relative; width:320px; height:180px;">
    <a href="javascript: { var vid = document.getElementById('video_1943544786'); if (firstTime) {vid.load(); firstTime = false;} if (vid.paused) vid.play(); else vid.pause(); }">
        <video id="video_1943544786" src="http://lcmob.net/1943544786&amp;mobile=true&amp;reporting=false"
            poster="http://ecdn.liveclicker.net/8079A8/origin/thumbnails/1937/1375934542_1_Flv_320x180_thumb_2.jpg"
            controls="controls" width="320" height="180">
            <track kind="subtitles" label="English" src="http://lcmob.net/1943544786&amp;subtitle=true&amp;lang=en">
            <track kind="subtitles" label="Español"
                src="http://lcmob.net/1943544786&amp;subtitle=true&amp;lang=es">
        </video>
    </a>
</div>

[karlcow]

This is the content of the a.
While Blink seems to ignore the a and goes directly to the player, Firefox tries to interpret the a

[KushalGooljar]

Would it have been better to use jQuery to handle the event instead? It is common practice to separate the content of HTML with action/behaviour.

Or instead of jQuery an onclick_ event handler would have been better.

[wisniewskit]

They have this href on an anchor tag which has a video tag inside of it. Note that it lacks a return false at the end:

<a href="javascript: { var vid = document.getElementById('video_1943544786'); if (firstTime) {vid.load(); firstTime = false;} if (vid.paused) vid.play(); else vid.pause(); }">
  <video ... />
</a>

As such the browser is supposed to do the "default" action for that link, which in the case of Firefox and Safari is to open a new tab and "visit" the link. Edge and Chrome don't do so, and seem to just ignore the default action. (I'm not sure if MobileSafari does what desktop Safari does in this case).

One way or the other, adding the missing return false makes it work cross-browser:

<a href="javascript: { var vid = document.getElementById('video_1943544786'); if (firstTime) {vid.load(); firstTime = false;} if (vid.paused) vid.play(); else vid.pause(); return false; }">
  <video ... />
</a>

I'll try to figure out if Chrome and Edge are being "clever" for cases like this with nested videos, or just treating all javascript: links as no-ops. But it's something that BestBuy should fix on their end regardless.

[wisniewskit]

Actually no, I was wrong. Safari does seem to be handling things as Chrome and Edge do. It seems like this is specific to the javascript: link trying to load() the video, as removing that un-breaks the code (but it also breaks being able to play the video). I'm continuing my investigation here (but the fix I proposed still holds).

[wisniewskit]

It does seem to be the case that Firefox is currently breaking javascript: links of this form unless they handle their play() promises in some way. I've filed bug 1382035 to try to figure this out.

Edit: it seems to be triggered by getting a promise, but not handling it. It doesn't have to be a play() promise specifically. That's why return false works.

[adamopenweb]

Thanks @wisniewskit.

Let's start by reaching out to a couple developers over LinkedIn.

[adamopenweb]

Our contact has passed this report along to the appropriate team internally.

[cipriansv]

After retesting the issue I confirm that the issue has been fixed. The video plays.

Tested with:
Browser / Version: Firefox Nightly 68.1a1 (2019-08-17), Firefox Preview 1.2.0 (Build #12181645)
Operating System: Huawei P10 (Android 8.0) - 1080 x 1920 pixels (~432 ppi pixel density)