search

videojs / video.js

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

Video not played after download more than 40% #7251

Closed larryxia-ddl closed 3 years ago

larryxia-ddl commented 3 years ago

Description

We have issues when playing back some video files. we found the canplay event is not triggered, from progress event, we can see there are more then 50% of the file of 450Mb was already downloaded. we also check the readystate, it was 1. The bufferring finally stopped at 58%, and play start, but playing stopped at the end of buffer. After this, unless we move the cursor from status bar, it didn't download or playing. if we move the curser, it continues buffering for some time, then play, then stop. We can't get play continually to end.

Additional Information

4ReviewExamL3.js:828 progress: buffered 0%Duration -NaN network -2 ReviewExamL3.js:828 progress: buffered 0%Duration -NaN network -1 ReviewExamL3.js:840 suspend: buffered 0%Duration -NaN network -1 22ReviewExamL3.js:828 progress: buffered 0%Duration -NaN network -2 11ReviewExamL3.js:828 progress: buffered 2%Duration -599.989767 network -2 14ReviewExamL3.js:828 progress: buffered 3%Duration -599.989767 network -2 13ReviewExamL3.js:828 progress: buffered 4%Duration -599.989767 network -2 14ReviewExamL3.js:828 progress: buffered 5%Duration -599.989767 network -2 14ReviewExamL3.js:828 progress: buffered 6%Duration -599.989767 network -2 13ReviewExamL3.js:828 progress: buffered 7%Duration -599.989767 network -2 13ReviewExamL3.js:828 progress: buffered 8%Duration -599.989767 network -2 14ReviewExamL3.js:828 progress: buffered 9%Duration -599.989767 network -2 13ReviewExamL3.js:828 progress: buffered 10%Duration -599.989767 network -2 13ReviewExamL3.js:828 progress: buffered 11%Duration -599.989767 network -2 14ReviewExamL3.js:828 progress: buffered 12%Duration -599.989767 network -2 13ReviewExamL3.js:828 progress: buffered 13%Duration -599.989767 network -2 12ReviewExamL3.js:828 progress: buffered 14%Duration -599.989767 network -2 14ReviewExamL3.js:828 progress: buffered 15%Duration -599.989767 network -2 14ReviewExamL3.js:828 progress: buffered 16%Duration -599.989767 network -2 13ReviewExamL3.js:828 progress: buffered 17%Duration -599.989767 network -2 14ReviewExamL3.js:828 progress: buffered 18%Duration -599.989767 network -2 13ReviewExamL3.js:828 progress: buffered 19%Duration -599.989767 network -2 15ReviewExamL3.js:828 progress: buffered 20%Duration -599.989767 network -2 13ReviewExamL3.js:828 progress: buffered 21%Duration -599.989767 network -2 14ReviewExamL3.js:828 progress: buffered 22%Duration -599.989767 network -2 12ReviewExamL3.js:828 progress: buffered 23%Duration -599.989767 network -2 13ReviewExamL3.js:828 progress: buffered 24%Duration -599.989767 network -2 14ReviewExamL3.js:828 progress: buffered 25%Duration -599.989767 network -2 14ReviewExamL3.js:828 progress: buffered 26%Duration -599.989767 network -2 12ReviewExamL3.js:828 progress: buffered 27%Duration -599.989767 network -2 13ReviewExamL3.js:828 progress: buffered 28%Duration -599.989767 network -2 12ReviewExamL3.js:828 progress: buffered 29%Duration -599.989767 network -2 14ReviewExamL3.js:828 progress: buffered 30%Duration -599.989767 network -2 13ReviewExamL3.js:828 progress: buffered 31%Duration -599.989767 network -2 13ReviewExamL3.js:828 progress: buffered 32%Duration -599.989767 network -2 15ReviewExamL3.js:828 progress: buffered 33%Duration -599.989767 network -2 12ReviewExamL3.js:828 progress: buffered 34%Duration -599.989767 network -2 14ReviewExamL3.js:828 progress: buffered 35%Duration -599.989767 network -2 14ReviewExamL3.js:828 progress: buffered 36%Duration -599.989767 network -2 13ReviewExamL3.js:828 progress: buffered 37%Duration -599.989767 network -2 14ReviewExamL3.js:828 progress: buffered 38%Duration -599.989767 network -2 12ReviewExamL3.js:828 progress: buffered 39%Duration -599.989767 network -2 14ReviewExamL3.js:828 progress: buffered 40%Duration -599.989767 network -2 13ReviewExamL3.js:828 progress: buffered 41%Duration -599.989767 network -2 13ReviewExamL3.js:828 progress: buffered 42%Duration -599.989767 network -2 13ReviewExamL3.js:828 progress: buffered 43%Duration -599.989767 network -2 15ReviewExamL3.js:828 progress: buffered 44%Duration -599.989767 network -2 15ReviewExamL3.js:828 progress: buffered 45%Duration -599.989767 network -2 14ReviewExamL3.js:828 progress: buffered 46%Duration -599.989767 network -2 13ReviewExamL3.js:828 progress: buffered 47%Duration -599.989767 network -2 14ReviewExamL3.js:828 progress: buffered 48%Duration -599.989767 network -2 14ReviewExamL3.js:828 progress: buffered 49%Duration -599.989767 network -2 14ReviewExamL3.js:828 progress: buffered 50%Duration -599.989767 network -2 16ReviewExamL3.js:828 progress: buffered 51%Duration -599.989767 network -2 15ReviewExamL3.js:828 progress: buffered 52%Duration -599.989767 network -2 15ReviewExamL3.js:828 progress: buffered 53%Duration -599.989767 network -2 12ReviewExamL3.js:828 progress: buffered 54%Duration -599.989767 network -2 12ReviewExamL3.js:828 progress: buffered 55%Duration -599.989767 network -2 14ReviewExamL3.js:828 progress: buffered 56%Duration -599.989767 network -2 13ReviewExamL3.js:828 progress: buffered 57%Duration -599.989767 network -2 11ReviewExamL3.js:828 progress: buffered 58%Duration -599.989767 network -2 ReviewExamL3.js:832 canplay: buffered 58%Duration -599.989767 network -2 ReviewExamL3.js:836 canplaythrough: buffered 58%Duration -599.989767 network -2 4ReviewExamL3.js:828 progress: buffered 58%Duration -599.989767 network -2 14ReviewExamL3.js:828 progress: buffered 59%Duration -599.989767 network -2 13ReviewExamL3.js:828 progress: buffered 60%Duration -599.989767 network -2 14ReviewExamL3.js:828 progress: buffered 61%Duration -599.989767 network -2 6ReviewExamL3.js:828 progress: buffered 62%Duration -599.989767 network -2 ReviewExamL3.js:828 progress: buffered 62%Duration -599.989767 network -1 ReviewExamL3.js:840 suspend: buffered 62%Duration -599.989767 network -1 2ReviewExamL3.js:828 progress: buffered 62%Duration -599.989767 network -2 ReviewExamL3.js:832 canplay: buffered 62%Duration -599.989767 network -2 ReviewExamL3.js:828 progress: buffered 62%Duration -599.989767 network -1 ReviewExamL3.js:840 suspend: buffered 62%Duration -599.989767 network -1 ReviewExamL3.js:836 canplaythrough: buffered 62%Duration -599.989767 network -1

versions

videojs

7.11.4 and 7.12.4.

browsers

chrome

OSes

windows

plugins

no

welcome[bot] commented 3 years ago

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

larryxia-ddl commented 3 years ago

BTW, we can play the videos with VLC player, both from local and web.

larryxia-ddl commented 3 years ago

The videos were created by an advantech encoder. However, some of the videos generated with same parameters can be played without problem, but some can't not played with the issue reported. Unfortunately, I can't provide the videos for testing. Although I can share the meta data of the video.

streams": [ { "index": 0, "codec_name": "h264", "codec_long_name": "H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10", "profile": "Constrained Baseline", "codec_type": "video", "codec_time_base": "2253737/135225000", "codec_tag_string": "avc1", "codec_tag": "0x31637661", "width": 1920, "height": 1080, "coded_width": 1920, "coded_height": 1088, "closed_captions": 0, "has_b_frames": 0, "sample_aspect_ratio": "1:1", "display_aspect_ratio": "16:9", "pix_fmt": "yuv420p", "level": 41, "chroma_location": "left", "refs": 1, "is_avc": "true", "nal_length_size": "4", "r_frame_rate": "30/1", "avg_frame_rate": "67612500/2253737", "time_base": "1/30000", "start_pts": 0, "start_time": "0.000000", "duration_ts": 18029896, "duration": "600.996533", "bit_rate": "6206123", "bits_per_raw_sample": "8", "nb_frames": "18030", "disposition": { "default": 1, "dub": 0, "original": 0, "comment": 0, "lyrics": 0, "karaoke": 0, "forced": 0, "hearing_impaired": 0, "visual_impaired": 0, "clean_effects": 0, "attached_pic": 0, "timed_thumbnails": 0 }, "tags": { "creation_time": "2021-05-21T13:26:03.000000Z", "language": "und", "encoder": "JVT/AVC Coding" } },

mister-ben commented 3 years ago

If it's MP4 the download and playback is handled natively by the browser, there's not a lot Video.js can influence. It may be the video is not optimised for streaming. If the encoder has a setting for quick start or putting the moov atom at the start, that may help. Otherwise how the file is delivered may be an issue, such as byte range header support. VLC isn't a very meaningful test for this sort of thing unfortunately. Its playback engine aims to be as compatible and fault tolerant as possible – it's a world apart from how an HTML video element behaves.

larryxia-ddl commented 3 years ago

Thank you for your reply.

I checked the location of "moov" atom in Hex editor. it is at the end of in all the files. But why some files can play normally, but some not?

I have one question for you, readyState is a property of player in Video.js. when the stateState will be changed from 2 to 4? what triggers this state change?

gkatsev commented 3 years ago

readyState comes from the browser itself: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState. It's possible that some of your files have the moov atom at the beginning, or they're short enough to load everything.

If your video is longer than ~5 minutes, I would recommend switching to a segmented file format like HLS or DASH.

larryxia-ddl commented 3 years ago

The video is created during exam on site, it will be reviewed by senior people afterward. We are not allowed to make any change of the video during playing, such as reencoding.

But I did some tests, and found some issues. For example, when I used FFMpeg to reencode the video that can't play back, I got this warning message. "[mp4 @ 000002533917e780] track 1: codec frame size is not set".  I also found that we get onloadeddata event only after the browser has downloaded more than 36% of the file. (the file is more then 240M).   I think the onloadeddata event should be fired when the first frame is loaded. so it is really weird that this event is NOT fired until the file was downloaded for 36%.

But I don't get a warning when re-encoding the video that can be played. and we get onloadeddata event every soon. see event log for details.

Another thing I can't explain is that if I use Old Edge version 44, it can play, onloadeddata event fired soon after we play the video that has issue with Chrome. New Edge does not work, this is expected, since new Edge is basically Chrome.

I think for some reason the frame size is wrong, However, I don't see any difference in the metadata of files between can and can not play.

Event log of video has issue.

ReviewExamL3.js:815 PlayBack Video Duration:NaN ReviewExamL3.js:854 Before Play Video Duration:NaN ReviewExamL3.js:856 After Play Video Duration:NaN

ReviewExamL3.js:841 load start: buffered 0%Duration -NaN network -2 ReadyState - 0

ReviewExamL3.js:828 progress: buffered 0%Duration -NaN network -1 ReadyState - 0 ReviewExamL3.js:852 suspend: buffered 0%Duration -NaN network -1 ReadyState - 0 ReviewExamL3.js:828 progress: buffered 0%Duration -NaN network -2 ReadyState - 0 ReviewExamL3.js:828 progress: buffered 0%Duration -NaN network -2 ReadyState - 0 ReviewExamL3.js:828 progress: buffered 0%Duration -NaN network -2 ReadyState - 0 ReviewExamL3.js:828 progress: buffered 0%Duration -NaN network -2 ReadyState - 0 ReviewExamL3.js:828 progress: buffered 0%Duration -NaN network -2 ReadyState - 0 ReviewExamL3.js:828 progress: buffered 0%Duration -NaN network -2 ReadyState - 0 ReviewExamL3.js:828 progress: buffered 0%Duration -NaN network -2 ReadyState - 0 ReviewExamL3.js:828 progress: buffered 1%Duration -600.996533 network -2 ReadyState - 1 ReviewExamL3.js:828 progress: buffered 2%Duration -600.996533 network -2 ReadyState - 1 ReviewExamL3.js:828 progress: buffered 2%Duration -600.996533 network -2 ReadyState - 1 ReviewExamL3.js:828 progress: buffered 2%Duration -600.996533 network -2 ReadyState - 1 ReviewExamL3.js:828 progress: buffered 3%Duration -600.996533 network -2 ReadyState - 1 ..... loaded data: buffered 36%Duration -600.996533 network -2 ReadyState - 4 ​ canplay: buffered 36%Duration -600.996533 network -2 ReadyState - 4 ​ canplaythrough: buffered 36%Duration -600.996533 network -2 ReadyState - 4

​ progress: buffered 37%Duration -600.996533 network -2 ReadyState - 4 ​ progress: buffered 37%Duration -600.996533 network -2 ReadyState - 4 ​ progress: buffered 37%Duration -600.996533 network -2 ReadyState - 4

Event log of video has not issue.

ReviewExamL3.js:815 PlayBack Video Duration:NaN ReviewExamL3.js:854 Before Play Video Duration:NaN ReviewExamL3.js:856 After Play Video Duration:NaN

ReviewExamL3.js:841 load start: buffered 0%Duration -NaN network -2 ReadyState - 0 ReviewExamL3.js:828 progress: buffered 0%Duration -NaN network -1 ReadyState - 0

ReviewExamL3.js:852 suspend: buffered 0%Duration -NaN network -1 ReadyState - 0

ReviewExamL3.js:836 loaded data: buffered 0%Duration -295.601167 network -2 ReadyState - 4

ReviewExamL3.js:832 canplay: buffered 0%Duration -295.601167 network -2 ReadyState - 4

ReviewExamL3.js:848 canplaythrough: buffered 0%Duration -295.601167 network -2 ReadyState - 4

Event log from Edge (playing the video has issues with Chrome) PlayBack Video Duration:NaN ReviewExamL3.js (815,9)

Before Play Video Duration:NaN ReviewExamL3.js (854,5)

After Play Video Duration:NaN ReviewExamL3.js (856,5)

load start: buffered 0%Duration -NaN network -2 ReadyState - 0 ReviewExamL3.js (841,5)

loaded data: buffered 0%Duration -600.996 network -2 ReadyState - 3 ReviewExamL3.js (836,5)

canplay: buffered 0%Duration -600.996 network -2 ReadyState - 3 ReviewExamL3.js (832,5)

progress: buffered 0%Duration -600.996 network -2 ReadyState - 3 ReviewExamL3.js (828,5)

5progress: buffered 1%Duration -600.996 network -2 ReadyState - 3 ReviewExamL3.js (828,5)

progress: buffered 1%Duration -600.996 network -2 ReadyState - 4

larryxia-ddl commented 3 years ago

We have confirmed that the video is not well formated. Even FFMpeg can't handle the error. Although VLC and Edge legacy edition can tolerate the defects.

It has nothing to do with Video.js. We can close this ticket.