钉钉小程序video全屏播放

前言

• 钉钉小程序直接调用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>