zoukankan      html  css  js  c++  java
  • 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)
    }

    }

  • 相关阅读:
    全世界最好听的钢琴曲
    清华“70后”院长刘云浩——生命在于运动,梦想从未止步 | 新“清”年特辑
    Android---60---Notification 通知栏的简单使用
    面向对象的三大特性
    一道淘汰85%面试者的百度开发人员面试题?
    Linux下基于Erlang的高并发TCP连接压力实验
    2014南瑞暑期实习面试笔试经历
    Oracle cloud control 12c 怎样改动sysmanpassword
    JEECG社区 一个微信教育站点案例源代码分享
    stm32智能小车之路之小车启动
  • 原文地址:https://www.cnblogs.com/liuhaotian548/p/14822356.html
Copyright © 2011-2022 走看看