VideoJs 在 react-native-webview 上返回 FALSE；并且在 api 的普通网络浏览器上为 TRUE：myPlayer.liveTracker.behindLiveEdge()

编程问答 2022-05-28

问题描述

问题如下。

  1. 在 react-native webview 上，我们托管了一个 VideoJs ；然后我们暂停正在播放的视频；当我在下面执行以下 function 时（写在 videojs 之上——videojs 托管在 webview 上）myPlayer.liveTracker.behindLiveEdge() 总是返回 false

  2. 如果我在浏览器上打开相同的代码就可以完美运行。这意味着，如果我暂停超过几秒钟，我会看到响应为 true for myPlayer.liveTracker.behindLiveEdge() 仅当播放视频有延迟（例如我暂停视频几秒钟）

有关如何获取方法的任何帮助：liveTracker.behindLiveEdge() geting to work 表示赞赏。相关代码部分如下


<head>
    <link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet">
    <!-- Forest -->
    <link href="https://unpkg.com/@videojs/themes@1/dist/forest/index.css" rel="stylesheet">
    
</head>

<body>
    <div id="videoControlWrapper" data-vjs-player>
        <video id="myPlayer" class="video-js vjs-theme-forest vjs-live vjs-fill" controls playsInline preload="auto" data-setup='{}'>

            <source src="https://cph-p2p-msl.akamaized.net/hls/live/2000341/test/master.m3u8" type="application/x-mpegURL"></source>
            </p>
        </video>
    </div>

    <script src="https://unpkg.com/video.js/dist/video.js"></script>
    <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        var myPlayer = videojs("myPlayer",{
                techOrder: ["html5","other supported tech"],liveui: true,fill: true,liveTracker: true,loop: false,notSupportedMessage: "not supported",responsive: false,autoplay: "muted",muted: false,preload: "auto",controls: true,html5: {
                    hlsjsConfig: {
                        enableWorker: true,liveBackBufferLength: 500,overrideNative: !videojs.browser.IS_SAFARI,liveSyncDurationCount: 1,// Highly recommended setting in live mode
                    },vhs: {
                        overrideNative: !videojs.browser.IS_SAFARI
                    },hls: {
                        overrideNative: !videojs.browser.IS_SAFARI
                    },},userActions: {
                    hotkeys: {},function onPlayerReady() {
                myPlayer.play();
            },);
       

        /** ISSUE IS IN THI FUNCTION*/
        const interval = setInterval(function() {
            if(myPlayer.liveTracker.behindLiveEdge()){
                // on webview the above IF always returns false. 
                document.getElementById("seek-to-live-button").style.display = "block";
                console.log("zzz webview: ",document.getElementById("seek-to-live-button"));
            }else{
                document.getElementById("seek-to-live-button").style.display = "none";
            }
        },5000);
         
         
      
        
    </script>    
</body>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

react-nativereact-nativevideo-streamingvideo.jswebviewwebview