• 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. });
  • 相关阅读:
    MySQL主从复制与读写分离
    k8s异常Too many requests: Too many requests, please try again later.
    使用开源软件Inno Setup制作软件安装包
    Vue的指令(一)
    微软放大招!Bing支持DALL-E3,免费AI绘画等你来体验!
    【微信小程序】微信Web开发者工具的部分界面功能
    京东数据平台:2023年9月京东洗衣机行业品牌销售排行榜
    Linux nohup bash cm_watch.sh >> run.log 2>&1 &
    关于天地图新手使用
    接口测试方法论——WebSocket一点通
  • 原文地址:https://blog.csdn.net/YUlangML/article/details/132587922