iT邦幫忙

0

使用requestFullscreen()顯示全螢幕,在輪流播放多媒體(Video與img)時出現錯誤

不好意思,想請各位先進,
小弟需要在html上,輪流顯示圖片(img)和影片(video),並且啟動時需要以全螢幕顯示。
但是網頁在全螢幕模式下切換元件(img 與 video)就出現在錯誤。而且之後就無法為全螢幕模式。
原本是想說可能一直使用『requestFullscreen()』,而沒有結束導致錯誤,之後在判斷『document.fullscreenElement === null』時,加入結束全螢幕模式,如『document.exitFullscreen();』,但仍有錯誤訊息。

想請教小弟語法該如何調整呢?或是使用方法有誤?
煩請各位先進不吝幫忙...謝謝!

錯誤訊息為:
https://ithelp.ithome.com.tw/upload/images/20210424/201369502RgSeCQehB.jpg
https://ithelp.ithome.com.tw/upload/images/20210424/20136950mnEMuf5v3M.jpg
範例CODE:

<script type="text/javascript">
    function PlayMedia() {
        var img1 = document.getElementById("img1");
        var vid1 = document.getElementById("vid1");
        var FileTimer;
        var seq = 0;
        var listJson =
            '{"Data":[{"FilePath":"./resource/1.jpg","FileTime":"3","FileType":"Photo"}' +
            ',{"FilePath":"./resource/1.mp4","FileTime":"3","FileType":"Video"}]}';
        var getData = JSON.parse(listJson).Data;
        console.log(listJson);
        FileTimer = setInterval(startShow(), 3000);


        function startShow() {//播放多媒體
            console.log(seq);
            if (getData[seq].FileType == "Photo") {
                img1.style = "display:block";
                vid1.style = "display:none";
                img1.setAttribute("src", getData[seq].FilePath);
                vid1.setAttribute("src", "");
                StartFullScreen("img1");
            } else if (getData[seq].FileType == "Video") {
                vid1.style = "display:block";
                img1.style = "display:none";
                vid1.setAttribute("src", getData[seq].FilePath);
                img1.setAttribute("src", "");
                StartFullScreen("vid1");
            }
            clearInterval(FileTimer);
            FileTimer = setInterval(
                function () {
                    startShow();
                }
                , (getData[seq].FileTime * 1000));
            seq++;
            if (seq >= JSON.parse(listJson).Data.length) {
                seq = 0;
            }
        }

        function StartFullScreen(objID) {//全螢幕
            var elem = document.getElementById(objID);
            if (document.fullscreenElement === null) {
                elem.requestFullscreen();
            } else {
                document.exitFullscreen();
                elem.requestFullscreen();
            }
        }
        //↓↓後續有再測試,追加這個語法,見補充.1↓↓
        document.addEventListener("fullscreenchange", function () {
            setTimeout(
                function () {
                    if (document.fullscreenElement) {
                        document.exitFullscreen();
                    }
                }
                , 2000);
        });
         //↑↑後續有再測試,追加這個語法,見補充.1↑↑
    }
</script>

===================補充.1====================
再加入監聽fullscreenchange的狀態改變時,先將全螢幕結束。希望能順利開啟下一個全螢幕模式,但第一個img播完後,可以順利關閉,但後面的video就開不了全螢幕了,而且仍出現相同錯誤。

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

1

我的答案不知道對不對。
且不太確定是否是這個問題。

映像中之前我在處理這個切換。需要用一下BACKCALL的處理方式。
要不然容易發生元件生成未完成而發生運行錯誤的情況。

你可以往這個方向去試試。

我要發表回答

立即登入回答