Question

我有一个.mp4视频文件（用我的iPhone拍摄），我想在html5视频标签中显示。

<video preload="auto" onclick="playpause(this);"> <source src= <%= encodeURI(post.get("videoFile").url()) %> type="video/mp4"> Your browser does not support the video tag, that is html5 </video>

视频在Safari和Firefox上播放时（在旋转之后）但Chrome上的尺寸（版本52.0.2743.116（64位））在其方向正确时被反转。

video on chrome; blue box is where the video should be!

设置视频标记的尺寸不起作用。任何想法如何解决这一问题？提前谢谢！

Answer 1

实际上，它应该通过给出维度来工作，不知道为什么它在Google Chrome中表现得很奇怪。如果它适用于您，请尝试这两个片段。如果可能请分享代码。

<!DOCTYPE html>
<html>
<body>
<video id="myVideo" style="width:320px;height:240px;" onclick="playPause();" >
  <source src="video.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>

    <script> 
var myVideo=document.getElementById("myVideo"); 

function playPause()
{ 
if (myVideo.paused) 
  myVideo.play(); 
else 
  myVideo.pause(); 
} 
</script>
</body>
</html>

<!-- 1st snippet  -->
        <video style="width:320px;height:240px;" controls>
          <source src= <%= encodeURI(post.get("videoFile").url()) %> type="video/mp4">
          Your browser does not support the video tag.
        </video>

<!-- 2nd snippet  -->    
       <video width="320" height="240" controls>
          <source src= <%= encodeURI(post.get("videoFile").url()) %> type="video/mp4">
          Your browser does not support the video tag.
       </video>

HTML5上的HTML5视频标记尺寸不正确

1 个答案: