H5 js获取video视频时长

需求：通过接口得到的一个视频在线地址，以及一个百分数进度，需要前端跳到对应的进度

过程：
1.video src=接口得到的src.

2. video设置ref，通过ref得到video的dom实例
3. 假设进度为60%，通过loadedmetadata事件，得到video的总时长，手动乘百分比，获取实时进度秒数，再用currentTime 设置

// 假设进度为60%
const video=videoRef.current;
video.addEventListener('loadedmetadata', () => {
                    const currentTime = 0.6 * video.duration;
                    video.currentTime = currentTime;
      }
});

4. video不需要整个视频下载完才能得到总时长，loadedmetadata也不是视频全下载完触发，是开头缓冲了一下能播放了就触发，所以不用担心视频文件过大的问题。

4.5 PC端的直接用上面代码即可，移动端的还有点问题，需要再往下看.

5. 移动端(真机)的video，不会自动加载，所以也不会触发loadedmetadata。需要手动触发下，用play()+pause()，其他代码跟之前的那篇自动实现poster效果一样

            const video=videoRef.current;
            video.setAttribute('playsinline', 'true');
            video.setAttribute('autoplay', 'false');
            video.setAttribute('preload', 'auto');
            video.setAttribute('webkit-playsInline', 'true');
            video.setAttribute('x-webkit-airplay', 'allow');
            video.setAttribute('x5-video-player-type', 'h5');
            video.setAttribute('x5-video-player-fullscreen', 'true');
            video.setAttribute('x5-video-orientation', 'landscape|portrait');
            //  让移动端视频开始缓冲
            video.play();
            video.pause();

            video.addEventListener('loadedmetadata', () => {
                    const currentTime = 0.6 * video.duration;
                    video.currentTime = currentTime;
                }
            });

微信浏览器里 play() + pause() 不好使，要用下面的代码 ，所以这两种都要写上

// 兼容移动端微信浏览器video
            if (window.WeixinJSBridge) {
                window.WeixinJSBridge.invoke('getNetworkType', {}, () => {
                    video.play();
                    video.pause();
                }, false);
            }