【问题标题】:How to make video responsive using video tag in html?如何使用 html 中的视频标签使视频响应?
【发布时间】:2018-03-22 08:47:28
【问题描述】:

我想让视频在 html 中响应。为此,我正在使用视频标签。 以下是我尝试过的代码。

<video controls autoplay="true" loop class="video_travel">
    <source src="video/video.mp4" type="video/mp4">
    <source src="video/video.webm" type="video/webm">
    <source src="video/video.ogv" type="video/ogg">
</video>

现在当我在手机中打开包含视频的网站时,我得到的是一个播放按钮,但无法播放任何东西。请帮忙..

【问题讨论】:

    标签: javascript html css html5-video


    【解决方案1】:

    使用 Css 属性-

    video {
        width: 100%;
        height: auto;
    }
    

    【讨论】:

      【解决方案2】:

      你可以在下面使用“max-width:100%”检查sn-p..

      video {
          max-width: 100%;
          height: auto;
      }
      <video controls autoplay loop class="video_travel">
          <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" />
          <source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm" />
          <source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg"  />
      </video>

      【讨论】:

      • 是的,现在试过了,我可以播放视频,但不能自动播放。
      【解决方案3】:

      你试过了吗

       video {
        width: 100%    !important;
        height: auto   !important;
      }
      

      【讨论】: