天天看點

LivePlayer如何隐藏播放器中不想展示的按鈕-H5直播點播播放器

LivePlayer播放器

免費的H5直播點播播放器:​​https://www.npmjs.com/package/@liveqing/liveplayer​​

隐藏播放器中按鈕

<style>
        /* 隐藏畫中畫按鈕 */
        .video-js .vjs-picture-in-picture-control {
            display: none !important;
        }

        /* 隐藏全屏按鈕 */
        .video-js .vjs-fullscreen-control {
            display: none !important;
        }

        /* 隐藏截圖按鈕 */
        .video-js .vjs-control-bar .vjs-icon-spinner {
            display: none !important;
        }
   </style>      

将該段樣式加入的HTML頁面中

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <script src="js/jquery-2.2.4.min.js"></script>
        <script src="js/liveplayer-lib.min.js"></script>
    <link href="css/index.d8f0b9a4.css" rel="stylesheet"></head>
    <body class="skin-blue sidebar-mini fixed">
        <div id="app"></div>
    <script type="text/javascript" src="js/index.d8f0b9a4.js"></script></body>
    <style>
        /* 隐藏畫中畫按鈕 */
        .video-js .vjs-picture-in-picture-control .vjs-icon-placeholder {
            display: none !important;
        }

        /* 隐藏全屏按鈕 */
        .video-js .vjs-fullscreen-control {
            display: none !important;
        }

        /* 隐藏截圖按鈕 */
        .video-js .vjs-control-bar .vjs-icon-spinner {
            display: none !important;
        }
   </style>
</html>```