你遇到的这个问题在移动端浏览器里特别常见——很多移动端浏览器默认会把视频唤起原生全屏播放器，哪怕你已经设置了内联播放的样式。不过通过添加几个特定属性就能轻松解决这个问题。

先看你原本的React组件视频代码：

return ( 
  <video style={{objectFit: 'cover', width: '100%', height: '80vh'}} id="background-video" loop muted autoPlay> 
    <source src={this.state.videoURL} type="video/mp4" /> 
    <source src={this.state.videoURL} type="video/ogg" /> 
  </video> 
)

你的视频地址定义：

this.state = { 
  videoURL: '//videos.ctfassets.net/1lmibopww0w9/5U4jOdHuRq62cygeyokaW6/f5444869997a7297f19ea847ccb16ae9/Black_Sands.mp4' 
}

解决方案：添加内联播放属性 #

核心是给<video>标签添加一组强制内联播放的属性，覆盖移动端浏览器的默认行为。修改后的代码如下：

return ( 
  <video 
    style={{objectFit: 'cover', width: '100%', height: '80vh'}} 
    id="background-video" 
    loop 
    muted 
    autoPlay
    playsinline
    webkit-playsinline
    x5-playsinline
    x5-video-player-type="h5"
    x5-video-orientation="portrait"
  > 
    <source src={this.state.videoURL} type="video/mp4" /> 
    <source src={this.state.videoURL} type="video/ogg" /> 
  </video> 
)

每个属性的作用： #

• playsinline：W3C标准属性，明确告诉浏览器视频要在页面内联播放，不要自动全屏
• webkit-playsinline：兼容iOS Safari以及所有基于WebKit内核的移动端浏览器
• x5-playsinline + x5-video-player-type="h5"：针对腾讯系浏览器（微信内置浏览器、QQ浏览器等），强制使用H5播放器而非原生全屏播放器
• x5-video-orientation="portrait"：可选属性，指定视频保持竖屏播放，避免某些浏览器自动切换横屏

另外要注意：你已经添加的muted属性是必须的——现在所有移动端浏览器的autoplay政策都要求视频静音才能自动播放，这也是你的视频能在桌面正常播放的前提之一，不要移除它。

这样修改后，视频就能在移动端浏览器里嵌入网页内播放，不会再唤起原生播放器了。

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