• video全屏,播放等控件


    一.隐藏vedio控件 css :
    video::-webkit-media-controls{
    display:none !important;
    }

    二.点击播放后全屏播放
    function bofang(ele) {
    if (ele.requestFullscreen) {
    ele.requestFullscreen();
    } else if (ele.mozRequestFullScreen) {
    ele.mozRequestFullScreen();
    } else if (ele.webkitRequestFullscreen) {
    ele.webkitRequestFullscreen();
    } else if (ele.msRequestFullscreen) {
    ele.msRequestFullscreen();
    }
    }
    ele:要全屏的元素,可以是document.body也可以是某一个div
    思路:
    1.判断该浏览器是否具有requestFullscreen方法
    2.有,则直接执行ele.requestFullscreen();没有则做浏览器兼容判断。

    三.退出全屏
    function exitFullscreen() {
    if(document.exitFullScreen) {
    document.exitFullScreen();
    } else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
    } else if(document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
    } else if(document.msExitFullscreen) {
    document.msExitFullscreen();
    }
    }
    退出全屏直接使用document调用exitFullscreen方法即可。

    四.获取当前全屏的节点
    function getFullscreenElement() {
    return (
    document.fullscreenElement ||
    document.mozFullScreenElement ||
    document.msFullScreenElement ||
    document.webkitFullscreenElement||null
    );
    }
    document.fullscreenElement():获取当前全屏的元素。
    假设id为div1的Element当前为全屏状态则 document.querySelector("#div1")===document.fullscreenElement

    五.判断当前是否全屏
    function isFullScreen() {
    return !! (
    document.fullscreen ||
    document.mozFullScreen ||
    document.webkitIsFullScreen ||
    document.webkitFullScreen ||
    document.msFullScreen
    );
    }

    六.判断当前文档是否能切换到全屏
    function isFullscreenEnabled() {
    return (
    document.fullscreenEnabled ||
    document.mozFullScreenEnabled ||
    document.webkitFullscreenEnabled ||
    document.msFullscreenEnabled
    );
    }

    注意事项:
    1.document下没有requestFullscreen
    2.requestFullscreen方法只能由用户触发,比如:在onload事件中不能触发
    3.页面跳转需先退出全屏
    4.进入全屏的元素,将脱离其父元素,所以可能导致之前某些css的失效
    解决方案:使用 :full-screen伪类 为元素添加全屏时的样式(使用时为了兼容注意添加-webkit、-moz或-ms前缀)
    5.一个元素A全屏后,其子元素要再全屏,需先让元素A退出全屏
    单击播放/暂停。

    function onDocumentClick(event) {
    clearTimeout(clickTimeId);
    //执行延时
    clickTimeId = setTimeout(function() {
    //此处为单击事件要执行的代码
    if(video.paused){
    video.play();
    }else{
    video.pause();
    }
    }, 250);
    }
    双击全屏/解除全屏
    function onDocumenDblClick(event) {
    clearTimeout(clickTimeId);
    console.log("鼠标双击");
    console.log(isFullScreen())
    if(isFullScreen()){
    exitFullscreen()
    }else{
    full(video)
    }

    }

  • 相关阅读:
    CSP-S2019游记
    SOJ 一句话题解整理
    CF547E Mike and Friends
    CF506E Mr. Kitayuta's Gift
    在windows环境下安装和使用Python(CPython)
    GeekGame2020_部分WriteUp
    php通过curl传输JSON对象
    Invalid datetime format: 1292 Incorrect datetime value
    解决 select2 开启 tags 不能输入中文的问题
    electerm 设置同步(Setting sync)
  • 原文地址:https://www.cnblogs.com/liuhaotian548/p/14822356.html
Copyright © 2020-2023  润新知