🦋 vLitejs is a fast and lightweight Javascript library for customizing video and audio player in Javascript with a minimalist theme (HTML5, Youtube, Vimeo, Dailymotion)
I think when the script is longer to load than the metadata of the video, the player never end loading.
In the html5 provider script, you listen for loadedmetadata & canplay events on video, but if the metadata already loaded, they never been fired and so the player never load.
IMO you need to test the status of the media before listening for events, something like that maybe: (in provider html5)
waitUntilVideoIsReady(): Promise<Event> {
return new window.Promise((resolve, reject) => {
if(this.media.readyState >= 2 && this.media.duration) {
resolve();
} else {
// Listen both events
// "loadedmetadata" is not fired on Firefox
// "canplay" is not fired in iOS
this.media.addEventListener('loadedmetadata', resolve, { once: true })
this.media.addEventListener('canplay', resolve, { once: true })
}
})
}
In an async javascript file, instanciate the player:
new Vlitejs(document.querySelector('video'));
In the network the index.js file is loaded after the video.
Expected behavior
Player load, we can play video
Screenshots and recordings
Vlite.js
4.0.4
Browser
Last Chrome
OS
Mac 11.2.1
Additional context
I see in the network tab of the chrome dev tool that the video load before my javascript.
Trying to add preload="none" to my markup doesn't change anything, trying to add a timestamp() to the src to clear the browser cache neither.
The only way working for me (except modify your plugin as mentioned above), is to set the src of the video html element in JS, just before instanciate Vlite, so the video can't load before the events are added.
yoriiis
commented
2 years ago
Describe the bug
I think when the script is longer to load than the metadata of the video, the player never end loading. In the html5 provider script, you listen for
loadedmetadata&canplayevents on video, but if the metadata already loaded, they never been fired and so the player never load.IMO you need to test the status of the media before listening for events, something like that maybe: (in provider html5)
the proper
readyStatevalue need to be checked maybe: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyStateSteps to reproduce
<video class="full" src="https://video.fnac-static.com/0/Video/FD/Comete/148275/CCP_MP4_640x360/1955629.mp4" ></video>new Vlitejs(document.querySelector('video'));In the network the index.js file is loaded after the video.
Expected behavior
Player load, we can play video
Screenshots and recordings
Vlite.js
4.0.4
Browser
Last Chrome
OS
Mac 11.2.1
Additional context
I see in the network tab of the chrome dev tool that the video load before my javascript. Trying to add preload="none" to my markup doesn't change anything, trying to add a timestamp() to the src to clear the browser cache neither.
The only way working for me (except modify your plugin as mentioned above), is to set the src of the video html element in JS, just before instanciate Vlite, so the video can't load before the events are added.