Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
359 views
in Technique[技术] by (71.8m points)

VideoJs returns FALSE on react-native-webview; and TRUE on normal web-browser for the api : myPlayer.liveTracker.behindLiveEdge()

The issue is as follows.

  1. on react-native webview, we hosted a VideoJs ; and later we pause the video being played; when i execute the following function below (written on top of videojs -- the videojs is hosted on webview) myPlayer.liveTracker.behindLiveEdge() always returns false

  2. The same code if i open on browser works perfectly. meaning if i pause for more than few seconds i see a response as true for myPlayer.liveTracker.behindLiveEdge() only when there is a delay in playing the video (example i paused the video for few seconds)

Any help on how to get the method: liveTracker.behindLiveEdge() geting to work is appreciated. The part of the relevant code is as follows


<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>

question from:https://stackoverflow.com/questions/65927055/videojs-returns-false-on-react-native-webview-and-true-on-normal-web-browser-fo

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
Waitting for answers

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...