search

videojs / video.js

Video.js - open source HTML5 video player
https://videojs.com
Other
37.56k stars 7.4k forks source link

Getting this error in Safari but not Chrome — ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported. #7271

Closed jovi-juan closed 3 years ago

jovi-juan commented 3 years ago

Description

The video at the top of the page plays fine in Chrome desktop (mac 91.0.4472.77 (Official Build) (x86_64)), but not Safari. https://kaagi.philippinestudies.uk/test-video-new/

It is also broken with the same error in Safari and Chrome mobile. I'm really mystified as to why this is.

Steps to reproduce

Explain in detail the exact steps necessary to reproduce the issue.

  1. Ok, this is in WordPress/Elementor
  2. I added the javascript and css via a custom html element just above the
  3. I publish it, it doesn't work, giving me the error above.

Results

Good in Chrome, not safari

Expected

I would expect to see the video appear in all the tested browsers

Actual

Only playing in Chrome desktop

Error output

See above

Additional Information

Please include any additional information necessary here. Including the following:

versions

videojs

what version of videojs does this occur with? 7.11.4

browsers

what browser are affected? See above

OSes

what platforms (operating systems and devices) are affected? Only tested mac

plugins

are any videojs plugins being used on the page? If so, please list them below. No. But I am using Wordpress/Elementor

jovi-juan commented 3 years ago

It is actually working in Firefox Developers edition 89.0b5 (64-bit)

jovi-juan commented 3 years ago

If it helps. here's the ffmpeg command I used to make all the files ffmpeg -hide_banner -y -i opening.mp4 \ -vf scale='420:trunc(ow/a/2)2' -c:a aac -b:a 64k -c:v h264 -profile:v main -crf 20 -sc_threshold 0 -g 48 -keyint_min 48 -hls_time 4 -hls_playlist_type vod -b:v 400k -maxrate 570k -bufsize 800k -hls_segment_filename hls/opening253p%03d.ts hls/opening_253p.m3u8 \ -vf scale='640:trunc(ow/a/2)2' -c:a aac -b:a 128k -c:v h264 -profile:v main -crf 20 -sc_threshold 0 -g 48 -keyint_min 48 -hls_time 4 -hls_playlist_type vod -b:v 800k -maxrate 856k -bufsize 1200k -hls_segment_filename hls/opening384p%03d.ts hls/opening_384p.m3u8 \ -vf scale='842:trunc(ow/a/2)2' -c:a aac -b:a 128k -c:v h264 -profile:v main -crf 20 -sc_threshold 0 -g 48 -keyint_min 48 -hls_time 4 -hls_playlist_type vod -b:v 1400k -maxrate 1498k -bufsize 2100k -hls_segment_filename hls/opening505p%03d.ts hls/opening_505p.m3u8 \ -vf scale='1280:trunc(ow/a/2)2' -c:a aac -b:a 128k -c:v h264 -profile:v main -crf 20 -sc_threshold 0 -g 48 -keyint_min 48 -hls_time 4 -hls_playlist_type vod -b:v 2800k -maxrate 2996k -bufsize 4200k -hls_segment_filename hls/opening768p%03d.ts hls/opening_768p.m3u8 \ -vf scale='1920:trunc(ow/a/2)*2' -c:a aac -b:a 128k -c:v h264 -profile:v main -crf 20 -sc_threshold 0 -g 48 -keyint_min 48 -hls_time 4 -hls_playlist_type vod -b:v 5000k -maxrate 5350k -bufsize 7500k -hls_segment_filename hls/opening1152p%03d.ts hls/opening_1152p.m3u8

I made an m3u8 file for the overall thing that looks like:

EXTM3U

EXT-X-VERSION:3

EXT-X-STREAM-INF:BANDWIDTH=400000,RESOLUTION=420x253)

opening_253p.m3u8

EXT-X-STREAM-INF:BANDWIDTH=800000,RESOLUTION=640x384)

opening_384p.m3u8

EXT-X-STREAM-INF:BANDWIDTH=1000000,RESOLUTION=842x505)

opening_505p.m3u8

EXT-X-STREAM-INF:BANDWIDTH=1200000,RESOLUTION=1280x768)

opening_768p.m3u8

EXT-X-STREAM-INF:BANDWIDTH=1400000,RESOLUTION=1920x1152)

opening_1152p.m3u8

jovi-juan commented 3 years ago

Strangely it is not working in the testing URLs in any browser https://kaagi.philippinestudies.uk/video/opening.m3u8

https://1-x--videojs-http-streaming.netlify.app/?debug=false&autoplay=false&muted=false&minified=false&liveui=false&partial=false&url=https%3A%2F%2Fkaagi.philippinestudies.uk%2Fvideo%2Fopening.m3u8&type=application%2Fx-mpegURL

https://videojs-http-streaming.netlify.app/?debug=false&autoplay=false&muted=false&minified=false&sync-workers=false&liveui=false&llhls=false&url=https%3A%2F%2Fkaagi.philippinestudies.uk%2Fvideo%2Fopening.m3u8&type=application%2Fx-mpegURL&keysystems=&buffer-water=false&override-native=true&preload=auto&mirror-source=true

video-archivist-bot commented 3 years ago

Hey! We've detected some video files in a comment on this issue. If you'd like to permanently archive these videos and tie them to this project, a maintainer of the project can reply to this issue with the following commands:

mister-ben commented 3 years ago

It's because of the ) on the end of each #EXT-X-STREAM-INF. Apparently Safari's native HLS playback can't parse the file with it there.

jovi-juan commented 3 years ago

Ah-ha! Thank you thank you thank you! I just plain didn't see that error.

I was using a concatenated worksheet and somehow that extra parens got in.

You are the best :)