webcompat / web-bugs

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

yourdailygerman.com - audio doesn't play #30447

Closed webcompat-bot closed 4 years ago

webcompat-bot commented 5 years ago

URL: https://yourdailygerman.com/german-past-tense-2/

Browser / Version: Firefox 68.0 Operating System: Linux Tested Another Browser: Yes

Problem type: Video or audio doesn't play Description: Audio does not play Steps to Reproduce: Click the play icons on this page. None of them play.

This works in Chromium.

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

Console Messages:

[u'[JavaScript Warning: "The resource at https://www.google-analytics.com/analytics.js was blocked because content blocking is enabled." {file: "https://yourdailygerman.com/german-past-tense-2/" line: 0}]', u'[console.log(JQMIGRATE: Migrate is installed, version 1.4.1) https://yourdailygerman.com/wp-content/cache/fvm/1556876035/out/header-4468542d.min.js:8:552]', u'[JavaScript Error: "TypeError: f is undefined" {file: "https://yourdailygerman.com/wp-content/cache/fvm/1556876035/out/footer-9c4cb2d1.min.js" line: 469}]\n309@https://yourdailygerman.com/wp-content/cache/fvm/1556876035/out/footer-9c4cb2d1.min.js:469:9811\nr@https://yourdailygerman.com/wp-content/cache/fvm/1556876035/out/footer-9c4cb2d1.min.js:469:142\nthis.wp.data<@https://yourdailygerman.com/wp-content/cache/fvm/1556876035/out/footer-9c4cb2d1.min.js:469:941\n@https://yourdailygerman.com/wp-content/cache/fvm/1556876035/out/footer-9c4cb2d1.min.js:469:952\n', u'[JavaScript Warning: "The resource at https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0&appId=1204514392893219&autoLogAppEvents=1 was blocked because content blocking is enabled." {file: "https://yourdailygerman.com/german-past-tense-2/" line: 0}]', u'[JavaScript Warning: "HTTP load failed with status 403. Load of media resource https://yourdailygerman.com/wp-content/uploads/audios/spoken-past-audio/spoken-past-2-ruehrei.mp3?_=3 failed." {file: "https://yourdailygerman.com/german-past-tense-2/" line: 0}]', u'[JavaScript Error: "NotSupportedError: The media resource indicated by the src attribute or assigned media provider object was not suitable."]', u'[JavaScript Warning: "HTTP load failed with status 403. Load of media resource https://yourdailygerman.com/wp-content/uploads/audios/spoken-past-audio/spoken-past-4-machen-gemacht.mp3?_=5 failed." {file: "https://yourdailygerman.com/german-past-tense-2/" line: 0}]', u'[JavaScript Error: "NotSupportedError: The media resource indicated by the src attribute or assigned media provider object was not suitable."]', u'[JavaScript Warning: "HTTP load failed with status 403. Load of media resource https://yourdailygerman.com/wp-content/uploads/audios/spoken-past-audio/spoken-past-6-gelingt.mp3?_=7 failed." {file: "https://yourdailygerman.com/german-past-tense-2/" line: 0}]', u'[JavaScript Error: "NotSupportedError: The media resource indicated by the src attribute or assigned media provider object was not suitable."]', u'[JavaScript Warning: "onmozfullscreenchange is deprecated." {file: "https://yourdailygerman.com/german-past-tense-2/" line: 0}]', u'[JavaScript Warning: "onmozfullscreenerror is deprecated." {file: "https://yourdailygerman.com/german-past-tense-2/" line: 0}]']

From webcompat.com with ❤️

softvision-sergiulogigan commented 5 years ago

I can reproduce this issue.

Tested with: Browser / Version: Firefox Nightly 68.0a1 (2019-05-08) Operating System: Linux Mint 18.3, Windows 10 Pro

image

reinhart1010 commented 5 years ago

There's an error while loading the file.

image

karlcow commented 5 years ago

so @reinhart1010 got it right. We get the same result on macOS.

if we access directly https://yourdailygerman.com/wp-content/uploads/audios/spoken-past-audio/spoken-past-0-fahrrad.mp3?_=1

The file is working.

<div class="mejs-mediaelement">
    <mediaelementwrapper 
        id="audio-2881-1">
        <audio 
            class="wp-audio-shortcode" 
            id="audio-2881-1_html5" 
            preload="none" 
            style="width: 100%; height: 100%;"
            src="https://yourdailygerman.com/wp-content/uploads/audios/spoken-past-audio/spoken-past-0-fahrrad.mp3?_=1">
            <source 
                type="audio/mpeg"
                src="https://yourdailygerman.com/wp-content/uploads/audios/spoken-past-audio/spoken-past-0-fahrrad.mp3?_=1">
                    <a
                        href="https://yourdailygerman.com/wp-content/uploads/audios/spoken-past-audio/spoken-past-0-fahrrad.mp3">https://yourdailygerman.com/wp-content/uploads/audios/spoken-past-audio/spoken-past-0-fahrrad.mp3</a>
        </audio>
    </mediaelementwrapper>
</div>

but the HTTP response is weird.

https://yourdailygerman.com/wp-content/uploads/audios/spoken-past-audio/spoken-past-0-fahrrad.mp3?_=1

And it sends back an HTML file with a 403.

HTTP/2.0 403 Forbidden
server: nginx
date: Tue, 21 May 2019 06:27:31 GMT
content-type: text/html
content-length: 1878
host-header: 192fc2e7e50945beb8231a492d6a8024
X-Firefox-Spdy: h2

but if I access directly this is working. https://yourdailygerman.com/wp-content/uploads/audios/spoken-past-audio/spoken-past-0-fahrrad.mp3?_=1

HTTP/2.0 304 Not Modified
server: nginx
date: Tue, 21 May 2019 06:34:08 GMT
last-modified: Fri, 22 Apr 2016 12:07:54 GMT
etag: "b269-53111ad39ba80-gzip"
cache-control: max-age=2592000, public
expires: Thu, 20 Jun 2019 06:34:08 GMT
vary: Accept-Encoding,User-Agent
host-header: 192fc2e7e50945beb8231a492d6a8024
x-proxy-cache: MISS
alt-svc: quic=":443"; ma=86400; v="43,39"
X-Firefox-Spdy: h2

oh interesting once it is accessed directly and stored in cache. This is working.

I wonder if it's a server misconfiguration or if it's something related to the way Gecko handles HTTP/2.0

karlcow commented 5 years ago

What are the request headers

GET /wp-content/uploads/audios/spoken-past-audio/spoken-past-2-ruehrei.mp3?_=3 HTTP/1.1
Host: yourdailygerman.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:69.0) Gecko/20100101 Firefox/69.0
Accept: audio/webm,audio/ogg,audio/wav,audio/*;q=0.9,application/ogg;q=0.7,video/*;q=0.6,*/*;q=0.5
Accept-Language: en-US,en;q=0.5
Range: bytes=0-
Connection: keep-alive
Referer: https://yourdailygerman.com/german-past-tense-2/
Cookie: PHPSESSID=bc4cd7a7c44d7917aa46c8cde902e778; pmpro_visit=1; pmpro_lpv_count=2%2C5; _ga=GA1.2.556238490.1558419155; _gid=GA1.2.2135883271.1558419155; _gat=1

which it replied with

HTTP/2.0 403 Forbidden
server: nginx
date: Tue, 21 May 2019 06:37:34 GMT
content-type: text/html
content-length: 1878
host-header: 192fc2e7e50945beb8231a492d6a8024
X-Firefox-Spdy: h2

Maybe server misconfiguration. Let's put them into needscontact

softvision-oana-arbuzov commented 4 years ago

The issue is still reproducible.

Tested with: Browser / Version: Firefox Nightly 72.0a1 (2019-11-19) Operating System: Linux Ubuntu 16.04

cipriansv commented 4 years ago

After retesting the issue I confirm that the issue has been fixed.

I am able to play the media.

Screenshot_13

Tested with: Browser / Version: Firefox Nightly 81.0a1 (2020-08-25) Operating System: Ubuntu 20.04 LTS

Closing the issue as fixed.