Html5原生video标签禁止全屏播放的实现

制作移动端H5，需要添加视频，点击播放的时候会自动全屏播放，记录一下处理局部播放的问题。

<video id="pageVideo"
               x5-playsinline="true"             //安卓需要设置的属性
               playsinline="true"                //ios需要设置的属性
               webkit-playsinline="true"         //ios10需要设置的属性
               preload="auto"                    //预加载
               loop	                              //循环播放
               poster="images/shipin.jpg">       //预设未播放封面
            <source src="mp4/shipin.mp4" type="video/mp4">
  </video>

解决播放前视频无封面黑屏问题
需要设置video宽度为1px，然后在视屏的div上放上遮罩

<div class="mask"><img src="1.jpg"></div>

点击遮罩时让其隐藏，同时给video加上css属性

<script>
    var video = $("#pageVideo");
    $("video").on('click',function(e){
        $(".mask").fadeOut()
        $("#videoBox video").css("width","100%")
        video[0].play()
    });
    $(".mask").on('click',function(e){
        $(this).fadeOut()
        $("#videoBox video").css("width","100%")
        video[0].play();
    });
</script>

• 本文链接： http://yoursite.com/_posts/2020/02/26/H5页面原生video禁止全屏播放/

我的视频应用类原创文章

• 酷播云免费视频二维码的完整使用教程（适合小企业做微信视频宣传） 
• 视频二维码的适用场景
• 微信公众号直播有哪些不一样的玩法？
• 微信视频直播如何做收费直播（如何做付费的微信直播）图文教程
• 说说视频编码格式、视频码率、视频帧率、分辨率的概念
• 原创教程：带ppt课件和讲师画面的教学视频录制完整教程
• 如何做电视节目的视频直播（电视台节目直播）
• 做视频直播时如何测试本地网络的上行带宽(网速测试)
• usb摄像头做教学直播实现pc和手机都可以在线观看教程
• 微信公众号直播有哪些不一样的玩法？
• 微信视频直播如何做收费直播（如何做付费的微信直播）图文教程
• 说说视频编码格式、视频码率、视频帧率、分辨率的概念
• 原创教程：带ppt课件和讲师画面的教学视频录制完整教程
• 如何做电视节目的视频直播（电视台节目直播）
• 做视频直播时如何测试本地网络的上行带宽(网速测试)
• usb摄像头做教学直播实现pc和手机都可以在线观看教程
• 微信公众号直播有哪些不一样的玩法？
• 如何做电脑游戏桌面录屏直播实现手机直接观看
• 免费视频存储平台（微云、百度网盘、谷歌硬盘、酷播云）的截图对比
• 云课堂直播功能介绍，更贴合在线教育、企业内训的场景应用
• 基于微信小程序做直播的截图（微信小程序发起视频直播）
• 在线教学场景下 讲师们做PPT课件直播的一些介绍
• FMS/wowza/red5/SRS流媒体服务器产品对比