在html页面中嵌入Google Drive视频,以兼容chrome、firefox和IE的方式

Pra*_*mna 5 html javascript video iframe embed-tag

我必须将谷歌驱动器中的视频嵌入到我的网站页面中。视频最初会隐藏在图像后面,单击图像后,视频应开始播放。我尝试过的实现如下,

1)使用视频标签

<video>
    <source type="video/mp4"
          src="https://drive.google.com/file/d/1mNaIx2U3m7zL9FW-wksaI1m_rL5Oh47v/preview?rel=0;&autoplay=1&mute=1"> 
</video>
Run Code Online (Sandbox Code Playgroud)
  • 这仅显示没有任何视频加载的播放器。

2)使用iframe

<iframe width="560" height="315" src="https://drive.google.com/file/d/1mNaIx2U3m7zL9FW-wksaI1m_rL5Oh47v/preview" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Run Code Online (Sandbox Code Playgroud)
  • 哪种有效,但视频无法以任何方式自动播放,并且视频在单击两次后播放 - 最初要单击视频图像,然后单击播放按钮。
  • 无法从原始代码访问 iframe 元素。
  • Mozilla Firefox 也不支持 iframe。

3)使用嵌入标签

<embed width="550px" height="310px" src="https://drive.google.com/file/d/1mNaIx2U3m7zL9FW-wksaI1m_rL5Oh47v/preview">
Run Code Online (Sandbox Code Playgroud)
  • 在这里,自动播放和全屏都不起作用。
  • 嵌入中的元素无法从原始代码访问。

任何对此的帮助将不胜感激!