钉钉小程序video全屏播放_钉钉小程序播放视频-优快云博客

本文链接：https://blog.youkuaiyun.com/yehuozhili/article/details/129417129

文章介绍了在钉钉小程序中遇到的视频播放问题，即安卓和iOS平台表现不一致，以及iOS可能会调用系统播放器导致全屏或画中画模式，影响全局水印功能。为解决此问题，提出了使用video标签结合CSS样式实现假全屏效果，并通过添加`playsinline`属性防止iOS设备全屏播放，同时提供自定义的播放控制来模拟播放操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

钉钉小程序直接调用video标签就可以播视频了，但是这样有个问题，安卓和ios的表现不一样，并且ios很容易会调用自己系统的播放器进行全屏或者画中画，这样脱离了钉钉。如果你在钉钉里面做了全局水印等功能，这些水印就会没有效果。

解决方案

我们可以使用标签做个假全屏效果。

 <view a:if="{{ visible }}" style="position:fixed;top:0;bottom:0;left:0;right:0; background:gray;display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:999">
 	...
  </view>

video标签使用css旋转90度，并且有个文档上也找不到的特殊属性playsinline可以阻止手机自带的播放器进行全屏播放：

    <video id="globalvideo" objectFit="fill" rawControls="{{true}}" controls="{{false}}" onError="onError" usecache="{{true}}" 
      playsinline="{{true}}" show-fullscreen-btn="{{false}}" show-play-btn="{{false}}" autoplay="{{true}}" enableNative="{{false}}" 
      onPlay="onPlayg" onPause="onPauseg" style="width:100vh;height:100vw;transform:rotate(90deg)" src="{{currentUrl}}"></video>

最后在视频上方盖上播放控制即可：

   <view style="z-index:999999;position:absolute;color:white;transform:rotate(90deg);right:0;bottom:70px; display:flex;">
      <text onTap="goplayg" style="margin-right:15px">
 		播放
      </text>
      <text onTap="gopauseg" style="margin-right:15px">
       	暂停
      </text>
      <text onTap="closevisible">
       退出全屏
      </text>
    </view>