search

webcompat / web-bugs

A place to report bugs on websites.
https://webcompat.com
Mozilla Public License 2.0
737 stars 63 forks source link

news.yahoo.co.jp - Video doesn't play #82605

Open webcompat-bot opened 3 years ago

webcompat-bot commented 3 years ago

URL: https://news.yahoo.co.jp/articles/841aaa7adca87e4c7b180917ff8da868d227d924

Browser / Version: Firefox Mobile 91.0 Operating System: Android 11 Tested Another Browser: Yes Chrome

Problem type: Site is not usable Description: Browser unsupported Steps to Reproduce: The videos provided by Yahoo! JAPAN don't play in browsers running on Fenix or Linux browsers.

Browser Configuration
  • gfx.webrender.all: false
  • gfx.webrender.blob-images: true
  • gfx.webrender.enabled: false
  • image.mem.shared: true
  • buildID: 20210802134352
  • channel: beta
  • hasTouchScreen: true
  • mixed active content blocked: false
  • mixed passive content blocked: false
  • tracking content blocked: false

View console log messages

From webcompat.com with ❤️

softvision-oana-arbuzov commented 3 years ago

Thanks for the report, I was able to reproduce the issue. image

Note:

  1. The issues it not reproducible on Chrome.
  2. The issue is reproducible on Firefox Nightly regardless of the ETP status.

Console: image

Tested with: Browser / Version: Firefox Nightly 92.0a1 (🦎 92.0a1-20210808090543), Firefox Beta 91.0.0-beta.6 (🦎 91.0-20210802134352) Operating System: Google Pixel 5 (Android 11) - 1080 x 2340 pixels, 19.5:9 ratio (~432 ppi density), Samsung Galaxy S8 (Android 9) - 1440 x 2960 pixels, 18.5:9 ratio (~570 ppi density) VPN pointing to Japan

Moving to Needsdiagnosis for further investigation.

karlcow commented 3 years ago

This is done through user agent sniffing. The issue can be reproduced in Firefox desktop with rdm mode and Firefox Android UA. If I switch the UA to be chrome in on RDM, I get the video working.

This is what Chrome is displaying:

<iframe
  id="yvpubplayer0"
  name="frame_yvpubplayer0_1628577914"
  src="//s.yimg.jp/images/yvpub/player/vamos/sd/latest/player.html?contentid=4995710&amp;height=223&amp;width=395&amp;propertyname=jp_news&amp;recommend=0&amp;spaceid=2079842558&amp;autostart=0&amp;repeat=0&amp;quality=240&amp;ds=88946_529603&amp;id=yvpubplayer0&amp;domain=news.yahoo.co.jp&amp;parenturl=https%3A%2F%2Fnews.yahoo.co.jp%2Farticles%2Ff114c5451c4a8f18e4aeccaae8f57a1daaf597fa&amp;parentfullurl=https%3A%2F%2Fnews.yahoo.co.jp%2Farticles%2Ff114c5451c4a8f18e4aeccaae8f57a1daaf597fa&amp;_playersession=ed878271-7756-4f29-88a6-f9601e869458"
  title="Yahoo!ビデオパブリッシャー"
  scrolling="no"
  style="display: block"
  marginheight="0"
  marginwidth="0"
  allowfullscreen="true"
  allow="autoplay; fullscreen"
  data-yvpubviewablecheck="id0"
  data-yvpubintersectionratio="1"
  width="395"
  height="222.1875"
  frameborder="0"
></iframe>

They use videoJS inside the iframe.

The iframe is not triggered on Firefox Android and the error message is being displayed instead.

<script src="https://s.yimg.jp/images/yvpub/player/js/player.js?v=1628578065673"></script>
<div
  class="yvpub-player yjads_priority_3"
  data-contentid="4995710"
  data-height="224"
  data-width="398"
  data-propertyname="jp_news"
  data-recommend="0"
  data-spaceid="2079842558"
  data-autostart="0"
  data-repeat="0"
  data-quality="240"
  data-ds="88946_529603"
  style="
    position: absolute;
    top: 0px;
    left: 0px;
    width: 398px;
    height: 224px;
    vertical-align: middle;
    text-align: center;
    background-color: rgb(0, 0, 0);
    overflow: hidden;
  "
  data-composed="1"
>
  <div
    id="yvpubplayer0"
    data-key="yvpubplayer0"
    style="
      width: 398px;
      height: 224px;
      text-align: center;
      position: relative;
      z-index: 1;
      margin: auto;
      overflow: hidden;
      vertical-align: middle;
      cursor: pointer;
    "
  >
    <div
      style="
        font-size: 14px;
        z-index: 3;
        color: rgb(255, 255, 255);
        position: relative;
        top: 82.5px;
      "
    >
      <span style="font-size: 10px">エラーコード：1001100</span>
      <div>
        ご利用の環境では映像を視聴できません。<br />映像視聴における推奨環境はこちらをご確認ください。
      </div>
    </div>
  </div>
</div>

Let's look at

https://s.yimg.jp/images/yvpub/player/js/player.js?v=1628578063801

Ah hard to debug because they create a parameter based on Epoch time in milliseconds at each new request:

https://s.yimg.jp/images/yvpub/player/js/player.js?v=1628578616434 https://s.yimg.jp/images/yvpub/player/js/player.js?v=1628578698956

There is a function UnsupportedEnvironment

      UnsupportedEnvironment: function () {
        var e = a.isSmartDevice() ? o.commonConfig.HELP_URL.SD : o.commonConfig.HELP_URL.PC,
        n = t && t.noLink ? 'こちら' : '<a href="' + e + '" class="vjs-error-help-link" target="_blank">こちら</a>';
        return new u.default({
          code: 1001100,
          headline: 'ご利用の環境では映像を視聴できません。',
          message: '映像視聴における推奨環境は' + n + 'をご確認ください。',
          options: t
        })
      }()
karlcow commented 3 years ago

but it is quite simple. Their support matrix is just not considering Firefox Android. 

  W = {
    PC: {
      Windows: {
        VERSION: 7,
        BROWSER_LIST: [
          {
            NAME: 'Chrome',
            VERSION: 31
          },
          {
            NAME: 'Firefox',
            VERSION: 45
          },
          {
            NAME: 'Edge',
            VERSION: z = 'ANY'
          },
          {
            NAME: U = 'ChromiumEdge',
            VERSION: z
          },
          {
            NAME: 'IE',
            VERSION: 11
          }
        ]
      },
      'Mac OS': {
        VERSION: z,
        BROWSER_LIST: [
          {
            NAME: 'Chrome',
            VERSION: 31
          },
          {
            NAME: 'Firefox',
            VERSION: 45
          },
          {
            NAME: U,
            VERSION: z
          },
          {
            NAME: 'Safari',
            VERSION: 8
          }
        ]
      }
    },
    SD: {
      iOS: {
        VERSION: 10,
        BROWSER_LIST: z
      },
      Android: {
        VERSION: 4.4,
        BROWSER_LIST: [
          {
            NAME: 'Chrome',
            VERSION: 53
          },
          {
            NAME: U,
            VERSION: z
          },
          {
            NAME: 'Silk',
            VERSION: z
          },
          {
            NAME: 'Samsung Browser',
            VERSION: z
          },
          {
            NAME: 'Facebook',
            VERSION: z
          },
          {
            NAME: 'Line',
            VERSION: z
          },
          {
            NAME: 'Instagram',
            VERSION: z
          }
        ]
      }
    }
  },

Let's add it to ua override.

karlcow commented 3 years ago

Site Interventions request at https://bugzilla.mozilla.org/show_bug.cgi?id=1724868

webcompat-bot commented 3 years ago

Generate outreach template

ghost commented 2 years ago

The current sitepatch only applies to Yahoo(jp) News, but this Firefox-eliminating video player is also used by at least the following sites.

softvision-oana-arbuzov commented 2 years ago

Updated URL: https://news.yahoo.co.jp/articles/14265013f99119ef57ad6a1f990bd9dd6433b675 image

ksy36 commented 2 years ago

Thanks @hokonch.

Lets try @yahoojapan. Maybe @kpango could help us with this issue. Hi Yusuke, we're wondering what could be a reason for not supporting Firefox on mobile here. Would you be able to pass this along to the relevant person or team to be looked at? Thank you!

softvision-raul-bucata commented 2 years ago

Updated URL: https://news.yahoo.co.jp/articles/2212e6fb780243d5b6cf4191a1717ec5f1231ffc

karlcow commented 2 years ago

@myakura do you still have contact with Yahoo! Japan?

myakura commented 2 years ago

Hey @karlcow,

@myakura do you still have contact with Yahoo! Japan?

I don't know. But I can ask :)

So far, If I'm reading it right, the current situation is:

  1. videos on various yahoo.co.jp domains are unavailable in Firefox for Android
  2. it seems the player (or the page) checks for the UA string and the code does not include FxA (while it does for Desktop)
  3. videos work fine on FxA by switching to the Chrome UA string (meaning the player technically works on FxA)
  4. right now Firefox reports Chrome-like UA string by using its site intervention mechanism to make the videos work
  5. that's not ideal and Mozilla wants to get rid of it

Let me know if there's anything wrong in the points I made, or any other things you want to tell.

ksy36 commented 2 years ago

Let me know if there's anything wrong in the points I made, or any other things you want to tell.

Not @karlcow, but yes, your points are correct @myakura :)

One thing I wanted to add is, right now we only have Chrome UA intervention only for https://news.yahoo.co.jp/, but as @hokonch mentioned the issue is affecting a lot more subdomains. While we could ship this intervention for all subdomains (essentially *.yahoo.co.jp), that would be less than ideal as it can cause other issues that we are not aware of and Firefox will disappear from Yahoo japan browser usage statistics (if they have any).

myakura commented 2 years ago

Hello @ksy36 ,

Not @karlcow, but yes, your points are correct @myakura :)

Yay ;)

One thing I wanted to add is, right now we only have Chrome UA intervention only for https://news.yahoo.co.jp/, but as @hokonch mentioned the issue is affecting a lot more subdomains.

Ah. Okay.

While we could ship this intervention for all subdomains (essentially *.yahoo.co.jp), that would be less than ideal as it can cause other issues that we are not aware of and Firefox will disappear from Yahoo japan browser usage statistics (if they have any).

Agreed.

I just sent them a message (pointing to this thread and bugzilla entry). Hopefully getting back soon.

narirou commented 2 years ago

Hi, all. I'm an engineer at Yahoo! JAPAN. Thank you for raising this issue.

The player you mentioned is a web player used in all of Yahoo! Japan's services.

It seems that this player judges which browsers can play based on UA, and treats all others as errors. I will contact the engineer who is creating the player about this issue.

ksy36 commented 2 years ago

Great, thanks a lot @myakura and @narirou :)

softvision-raul-bucata commented 2 years ago

Updated link: https://news.yahoo.co.jp/pickup/6423826

softvision-raul-bucata commented 1 year ago

Updated link: https://news.yahoo.co.jp/articles/0f78ab97ea915c0f3f6d3184d67b124cd52fa534

[inv_40/2022]