天天看点

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