• video 按钮全屏


     微信小程序方法:

    1. <video class="my-video1" id="myVideo1" bindfullscreenchange="screenChange" src="{{ossPath+'video/dunhuang-video202201051033.mp4'}}" controls='controls'></video>
    2. 点击进入全屏:
    3. showVideo1() {
    4.     let videoContext = wx.createVideoContext('myVideo1');  //获取video的dom
    5.     videoContext.requestFullScreen({ direction: 90 });
    6.     videoContext.play() //视频播放
    7. },

    另一种方法

    1. <video bindtap="fullscreen" id="myVideo" style="width: 100rpx; height: 100rpx;" src="http://jixiequan-miniapp.oss-cn-beijing.aliyuncs.com/attach/video/2023/08/30/fd618202308301522291090.mp4"/>
    2. //按钮事件
    3. fullscreen() {
    4. let videoContext = wx.createVideoContext('myVideo'); //获取video的dom
    5. videoContext.requestFullScreen({ direction: 90 });
    6. videoContext.play() //视频播放
    7. }

    监听是否退出或进入全屏:(在video上绑定bindfullscreenchange事件

    1. screenChange(e) {
    2.     let fullScreen = e.detail.fullScreen //true为进入全屏,false为退出全屏
    3.     let videoContext = wx.createVideoContext('myVideo1');
    4. },


    h5方法:
    点击进入全屏:

    1. <video id="product1" controls="false" webview.allowsInlineMediaPlayback=YES; x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portraint" :src="videoPath+'qhtalent202112/product-info.mp4'">
    2. </video>
    3. //判断进入退出全屏
    4. checkIsFullScreen() {
    5.     var isFullScreen = document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen;
    6.     return isFullScreen == undefined ? false : isFullScreen;
    7. },
    8. // 全屏
    9. Screen(element) {
    10.     if (element.requestFullscreen) {
    11.         element.requestFullscreen();
    12.     } else if (element.mozRequestFullScreen) {
    13.         element.mozRequestFullScreen();
    14.     } else if (element.msRequestFullscreen) {
    15.         element.msRequestFullscreen();
    16.     } else if (element.oRequestFullscreen) {
    17.         element.oRequestFullscreen();
    18.     } else if (element.webkitRequestFullscreen) {
    19.         element.webkitRequestFullScreen();
    20.     } else {
    21.         var requestFullscreen =
    22.             document.documentElement.requestFullscreen ||
    23.             document.documentElement.webkitRequestFullscreen ||
    24.             document.documentElement.mozRequestFullscreen ||
    25.             document.documentElement.requestFullScreen ||
    26.             document.documentElement.webkitRequestFullScreen ||
    27.             document.documentElement.mozRequestFullScreen;
    28.         if (requestFullscreen) {
    29.             requestFullscreen.call(document.documentElement);
    30.         }
    31.         //ios不处理,自动就会全屏
    32.     }
    33.     element.play()
    34. },
    35. //点读笔播放视频
    36. productBtn() {
    37.     let product1 = document.getElementById('product1')
    38.     product1.play()
    39.     this.Screen(product1)
    40. },
    41. document.addEventListener('fullscreenchange', () => {
    42.     if (this.checkIsFullScreen()) {
    43.         this.productPlay = true
    44.         console.log("进入全屏");
    45.     } else {
    46.         console.log("退出全屏");
    47.         this.productPlay = false
    48.         document.getElementById('product1').pause()
    49.     }
    50. });
  • 相关阅读:
    使用Spring Integration接收TCP与UDP请求
    K8S:K8S自动化运维容器Docker集群
    uboot源码
    java基于微信小程序+mysql+RocketMQ开发的医院智能问诊系统源码 智能导诊系统 智能导诊小程序源码
    OSG第三方库编译之三十六:exiv2编译(Windows、Linux、Macos环境下编译)
    注意力机制讲解与代码解析
    c++基础(自用)
    【退役记】NOI2022
    【运维 Pro】时序场景实践与原理 - 2. 宽表,窄表与 JSON 字段
    zookeeper知识点扫盲
  • 原文地址:https://blog.csdn.net/YUlangML/article/details/132587922