Question

我正在使用以下内容，但它只显示适合屏幕的视频的一半。

 var file = $('#photo')[0].files[0];
 console.log(file);

 var data = { name: name, dob: dob,fname: fname,mob: mob,mName: mName, Email: Email, NID: NID,password: password,District: District,Thana: Thana,gender: gender,file: file };
 $.ajax({url: "singleUpload",
                type: "POST",
                data:data,
                contentType: false,
                success: function (response) 
                {
                $("#academic").html(response);
                console.log("ajax ok");
                }    
 });

Answer 1

.video-container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%; 
  overflow: hidden;
}
.video-container video {

  min-width: 100%; 
  min-height: 100%; 
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

<div class='video-container'>
         
  <video controls="controls"
           x-webkit-airplay="allow" 
           data-youtube-id="N9oxmRT2YWw" 
           src="your/video/path/here">
  </video>
</div>

Answer 2

看看这个：

<div id="video-local">
<video id="myvideo"></video>
</div>

例如Video，我使用了getusermedia（你可以尝试不同的分辨率来检查）：

    navigator.getUserMedia = navigator.getUserMedia ||
                         navigator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia;

if (navigator.getUserMedia) {
   navigator.getUserMedia({ audio: true, video: { width: 1280, height: 720 } },
      function(stream) {
         var video = document.querySelector('video');
         video.srcObject = stream;
         video.onloadedmetadata = function(e) {
           video.play();
         };
      },
      function(err) {
         console.log("The following error occurred: " + err.name);
      }
   );
} else {
   console.log("getUserMedia not supported");
}

最后是一些css：

#video-local video {
    display: block;
    margin: 0 auto;
    height: 100%;
    width: 100% ;
    max-width: auto;
    max-height: auto;
     padding: 1% 5% 10% 5%;
}

另见： https://jsfiddle.net/v07rk7qz/1/

Answer 3

添加 object-fit：initial; 做了诀窍

.video-container video {
      object-fit: initial;
      position: absolute; 
      width: 100%;
      height: 100%;   
    }

无论分辨率如何，都将视频调整到移动设备的宽度

3 个答案: