Microsoft Teams安卓版不支持HTML5 <video>标签控件功能技术问询

问题背景 #

开发Microsoft Teams标签页时，通过修改<source>标签的src属性切换视频源播放内容，但在Teams安卓应用中，原生HTML5 <video>标签的核心控件功能失效：

• 全屏按钮显示为禁用状态
• 无画中画选项
• 无法调节播放速度
  相同代码在iOS Teams及网页版Teams中运行完全正常，测试videojs、fluentui/react-northstar等第三方播放器也存在同样问题。

原因分析 #

Teams安卓端基于自定义WebView内核，对原生HTML5视频控件的部分API做了限制，第三方播放器本质还是依赖原生视频API，因此无法绕过这些限制，只能通过自定义视频控件来实现缺失的功能。

解决方案：自定义视频控件 #

1. 基础结构改造 #

移除原生controls属性，手动构建控件栏，保留动态切换视频源的逻辑：

<div class="video-container">
  <video id="video_player" preload="metadata" controlsList="nodownload" 
         class="ms-Grid-col ms-sm12 ms-md12 ms-lg12">
    <source id="video_player_source" src="" type="video/mp4"/>
  </video>
  <!-- 自定义控件栏 -->
  <div class="custom-controls">
    <button id="play-pause-btn">播放</button>
    <input type="range" id="progress-bar" min="0" max="100" value="0">
    <button id="fullscreen-btn">全屏</button>
    <select id="playback-rate">
      <option value="0.5">0.5x</option>
      <option value="1" selected>1x</option>
      <option value="1.5">1.5x</option>
      <option value="2">2x</option>
    </select>
    <button id="pip-btn">画中画</button>
  </div>
</div>

2. 核心功能实现 #

通过JavaScript手动绑定事件，实现各控件功能：

const video = document.getElementById('video_player');
const playPauseBtn = document.getElementById('play-pause-btn');
const progressBar = document.getElementById('progress-bar');
const fullscreenBtn = document.getElementById('fullscreen-btn');
const playbackRateSelect = document.getElementById('playback-rate');
const pipBtn = document.getElementById('pip-btn');

// 播放/暂停
playPauseBtn.addEventListener('click', () => {
  if (video.paused) {
    video.play();
    playPauseBtn.textContent = '暂停';
  } else {
    video.pause();
    playPauseBtn.textContent = '播放';
  }
});

// 进度条控制
video.addEventListener('timeupdate', () => {
  const progress = (video.currentTime / video.duration) * 100;
  progressBar.value = progress;
});
progressBar.addEventListener('input', () => {
  const time = (progressBar.value / 100) * video.duration;
  video.currentTime = time;
});

// 全屏功能
fullscreenBtn.addEventListener('click', () => {
  if (!document.fullscreenElement) {
    // 兼容不同浏览器前缀
    if (video.requestFullscreen) {
      video.requestFullscreen();
    } else if (video.webkitRequestFullscreen) {
      video.webkitRequestFullscreen();
    } else if (video.msRequestFullscreen) {
      video.msRequestFullscreen();
    }
    fullscreenBtn.textContent = '退出全屏';
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
    fullscreenBtn.textContent = '全屏';
  }
});

// 播放速度调节
playbackRateSelect.addEventListener('change', () => {
  video.playbackRate = parseFloat(playbackRateSelect.value);
});

// 画中画功能
// 先判断是否支持画中画API
if (!document.pictureInPictureEnabled) {
  pipBtn.style.display = 'none';
}
pipBtn.addEventListener('click', async () => {
  try {
    if (!document.pictureInPictureElement) {
      await video.requestPictureInPicture();
      pipBtn.textContent = '退出画中画';
    } else {
      await document.exitPictureInPicture();
      pipBtn.textContent = '画中画';
    }
  } catch (err) {
    console.error('画中画功能失败:', err);
  }
});

// 动态切换视频源（保留原有逻辑）
function switchVideoSource(src) {
  const source = document.getElementById('video_player_source');
  source.src = src;
  video.load();
  video.play();
}

3. 样式优化（可选） #

给自定义控件添加基础样式，适配Teams界面风格：

.video-container {
  position: relative;
  width: 100%;
  max-width: 100%;
}
#video_player {
  width: 100%;
  height: auto;
}
.custom-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
  padding: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.custom-controls button, .custom-controls select {
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}
#progress-bar {
  flex: 1;
}

关键说明 #

• 第三方播放器失效是因为它们依赖原生视频控件的API，而Teams安卓端的WebView限制了这些API调用，自定义控件直接操作视频对象的底层属性，可绕过限制。
• 画中画功能需要安卓系统版本（Android 8.0+）及Teams应用的支持，若不支持可隐藏对应按钮。
• 全屏功能需确保Teams安卓应用已获得全屏权限。

内容的提问来源于stack exchange，提问作者Prashant Gupta