videojs全螢幕後滑鼠不見了

html5 css

AccountDeleted 2022-06-14 23:36:13 ‧ 818 瀏覽

分享至

我有用css自訂一個滑鼠
差不多像這樣

我有用css把原本的滑鼠弄掉

在全螢幕之前確定可以顯示

在全螢幕之後

就不見了
我有把滑鼠的z-index設在9999，但沒用

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

貓虎皮

iT邦新手 3 級 ‧ 2022-06-15 13:45:57

最佳解答

原因
requestFullscreen會把所屬的元素放大至全螢幕，
而你對指定標籤做了全螢幕之後，
畫面便只會呈現該元素。

解決辦法 1
如果要使自定義的元素當作游標，
並在全螢幕時使用，
便要將該游標元素移至全螢幕元素內，
完整範例在文末。

解決辦法 2
使用css的cursor屬性來更改游標樣式，
範例如下。

*{
    cursor: url('yourCursorImagePath.png'), auto;	
}

yourCursorImagePath.png為游標圖片路徑。
第二個參數為：前一個參數無法使用時的備用值。
若有第三個參數則功能同參數二。

完整範例

<!DOCTYPE html>
    <head>
        <title>Videojs Test</title>
        <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" />
        <style>
            * {
                cursor: none !important;
            }
            html, body {
                margin: 0px;
                padding: 0px;
                width: 100vw;
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .cssCursor {
                width: 1.5vw;
                height: 1.5vw;
                border-style: solid;
                border-width: 0.2vw;
                border-color: gray;
                border-radius: 50%;
                position: fixed;
                display: flex;
                justify-content: center;
                align-items: center;
                pointer-events: none;
                z-index: 999;
            }
            .cssCursor > div {
                width: 0.4vw;
                height: 0.4vw;
                background-color: black;
                border-radius: 50%;
                position: fixed;
            }
        </style>
    </head>
    <body>
        <div class="cssCursor"><div></div></div>
        <video id="my-video" class="video-js" controls preload="auto" width="640" height="264" poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
            <source src="https://docs.microsoft.com/video/media/d0ef63e4-5a13-44f4-9e46-854ee30445ea/s2video23-650testingamodel_high.mp4" type="video/mp4" />
        </video>
        <script src="https://vjs.zencdn.net/7.19.2/video.min.js"></script>
        <script>    
            function createCssCursor(){
                newCssCursor = document.createElement('div');
                dot = document.createElement('div');
                newCssCursor.className = 'cssCursor';
                newCssCursor.appendChild(dot);
                return(newCssCursor);
            }    
            function cursorSetLoop(){
                document.querySelectorAll('.vjs-fullscreen').forEach(vjsBox => {
                    if(vjsBox.getAttribute('cssCursorAdded') != 'true'){
                        vjsBox.appendChild(createCssCursor());
                        vjsBox.setAttribute('cssCursorAdded', 'true');
                    }
                });
                document.querySelectorAll('[cssCursorAdded="true"]:not(.vjs-fullscreen)').forEach(vjsBox => {
                    vjsBox.querySelector('.cssCursor').remove();
                    vjsBox.removeAttribute('cssCursorAdded');
                });
                setTimeout(cursorSetLoop, 30);
            }
            function cssCursorControll(event){
                document.querySelectorAll('.cssCursor').forEach(cssCursor => {
                    cssCursor.style.top = event.pageY - cssCursor.offsetHeight/2 + 'px';
                    cssCursor.style.left = event.pageX - cssCursor.offsetWidth/2 + 'px';
                });
            }
            document.body.addEventListener('mouseclick', cssCursorControll);
            document.body.addEventListener('mousemove', cssCursorControll);
            cursorSetLoop();
            </script>
    </body>
</html>

以上，希望有幫助到您=^w^=