Change the loadedmetadata event to the canplaythrough event that occu…

…rs after the canplay event

v1.9 - 7.20.2 video.js (L.L.27087-27124)

Timestamp URL shortcut does not work
mediacms-io#680

TIMESTAMP_IN_TIMEBAR does not work
mediacms-io#694

frontend/README.md

@@ -27,3 +27,5 @@ Open in browser: [http://localhost:8088](http://localhost:8088)
 Generates the folder "**_frontend/dist_**".
 
 Copy folders and files from "**_frontend/dist/static_**" into "**_static_**".
+
+    cp -rf /home/mediacms.io/mediacms/frontend/dist/static /home/mediacms.io/mediacms/

frontend/src/static/js/components/comments/Comments.jsx

@@ -444,7 +444,7 @@ export default function CommentsList(props) {
       });
     }
 
-    video.one('loadedmetadata', () => {       
+    video.one('canplay', () => {       
       retrievedComments.forEach(comment => {          
         comment.text = setTimestampAnchorsAndMarkers(comment.text, video);
       });

frontend/src/static/js/components/video-player/VideoPlayer.jsx

@@ -192,7 +192,7 @@ export function VideoPlayer(props) {
       document.addEventListener('visibilitychange', initPlayer);
     }
 
-    player.player.one('loadedmetadata', () => {       
+    player.player.one('canplaythrough', () => {       
       const urlParams = new URLSearchParams(window.location.search);
       const paramT = Number(urlParams.get('t'));
       const timestamp = !isNaN(paramT) ? paramT : 0;