• 设置video标签的默认样式


    使用chrome调试,如下图,在setting里勾选框中选项

    可以看到video标签的控制栏dom结构,如下图,修改对应的样式即可

    //全屏按钮
    video::-webkit-media-controls-fullscreen-button {
    // display: none;
    }
    //播放按钮
    video::-webkit-media-controls-play-button {

    }
    //进度条
    video::-webkit-media-controls-timeline {
    // display: none;
    }
    //观看的当前时间
    video::-webkit-media-controls-current-time-display{
    // display: none;
    }
    //剩余时间
    video::-webkit-media-controls-time-remaining-display {
    // display: none;
    }
    //音量按钮
    video::-webkit-media-controls-mute-button {
    // display: none;
    }
    video::-webkit-media-controls-toggle-closed-captions-button {
    // display: none;
    }
    //音量的控制条
    video::-webkit-media-controls-volume-slider {
    // display: none;
    }
    //所有控件
    video::-webkit-media-controls-enclosure{
    // display: none;
    }

    多媒体事件(Media Events)
    通过视频(videos),图像(images)或者音频(audio) 触发该事件,多应用于HTML媒体元素比如 <audio>, <embed>, <img>, <object>, 和<video>):

     原文链接:https://blog.csdn.net/danruwang/java/article/details/96111753

  • 相关阅读:
    随想 20180517
    随想 20180516
    随想 20180514
    alpinelinux
    装系统时总是提示 保存分区表时出现错误(0000000001)函数不正确
    kindeditor在Firefoxt 和 Chrome 下不能取到值的解决方法
    浏览器兼容
    php生成随机密码的几种方法
    按钮效果
    linux下修改/dev/shm tmpfs文件系统大小
  • 原文地址:https://www.cnblogs.com/jinzhou/p/12841275.html
Copyright © 2020-2023  润新知