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

最新推荐文章于 2023-04-18 15:49:32 发布

Marvin1311

最新推荐文章于 2023-04-18 15:49:32 发布

阅读量1.5k

点赞数

分类专栏： LivePlayer(WEB H5播放器) 文章标签： LivePlayer 隐藏按钮青柿流媒体直播点播

www.liveqing.com

本文链接：https://blog.csdn.net/Marvin1311/article/details/100137442

版权

LivePlayer(WEB H5播放器) 专栏收录该内容

15 篇文章 16 订阅

订阅专栏

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