让视频在网页居中 高度 匹配到手机平板

问题遇到的现象和发生背景

接上个问题 后续

遇到的现象和发生背景，请写出第一个错误信息

视频 播放 电脑端 可以使用 如何适应平板 手机上面播放的 宽度*高度

用代码块功能插入代码，请勿粘贴截图。 不用代码块回答率下降 50%

CSS样式 请写出来

//让视频在网页居中  高度 匹配到手机平板
<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}'>
    <source id="source" type="application/x-mpegURL">
video>
运行结果及详细报错内容
我的解答思路和尝试过的方法，不写自己思路的，回答率下降 60%
我想要达到的结果，如果你需要快速回答，请尝试 “付费悬赏”

1.使用媒体查询来调整视频的大小和位置。可以使用以下代码在视频宽度小于等于 480px 时将视频大小调整为 100%，并居中：

@media only screen and (max-width: 480px) {
  #myVideo {
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
}

2.使用 Flexbox 布局将视频居中。可以将视频包装在一个容器中，并使用以下代码将容器设置为 Flexbox 布局：

#container {
  display: flex;
  align-items: center;
  justify-content: center;
}

3.使用 JavaScript 调整视频的大小和位置。使用以下代码获取视频的宽度和高度，并将其调整为屏幕大小的 50%：

const video = document.getElementById("myVideo");
const width = window.innerWidth * 0.5;
const height = window.innerHeight * 0.5;
video.style.width = width + "px";
video.style.height = height + "px";
video.style.margin = "0 auto";

#myVideo {
  display: block;
  margin: 0 auto;
  height: 100%;
  width: auto;
}

参考配置和说明: https://blog.csdn.net/fobweb/article/details/119866855

提供参考实例【HTML-视频高度自适应解决方法】，链接：https://blog.csdn.net/wang704987562/article/details/81586992?spm=1001.2101.3001.6650.12&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-12-81586992-blog-108605035.pc_relevant_multi_platform_whitelistv3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-12-81586992-blog-108605035.pc_relevant_multi_platform_whitelistv3&utm_relevant_index=13

display: block;
margin: 0 auto;

display： block；
margin：0 auto；
如果再详细点可以媒体查询。再平板的宽度下使用上面的css样式代码

这几天，网页中的视频在移动端显示的层级非常高，给定位是解决不了的，在网上找了很多方法，然后找到了只有用jsmpeg将video转换成canvas才行。

1.  <canvas id="video"></canvas>

2. 在网页中引入 <script type="text/javascript" src="./static/js/jsmpeg.js"></script>

3. https://github.com/phoboslab/jsmpeg的jsmpeng具体说明文档

    var player = new JSMpeg.Player('./static/FinalRender_App_3_1.ts', {

      canvas: document.getElementById("video"),

      loop: false,

      autoplay: true,

      startSign: true,

      startCallBack: function () {

      }

      // playingCallBack: playingFun,

      // endCallBack: endFun

    });

    player.play();

4. 以上视频的地址只能是ts格式，所以我们要http://ffmpeg.org/在ffmpeg的官网下载可以将MP4或者其他格式的视频转为ts格式的相关exe。

5. 下载下来打开bin文件夹，在此窗口打开cmd命令行，





ffmpeg -i FinalRender_App_3_1.mp4 -f mpegts -codec:v mpeg1video -s 960x540 -b:v 1500k -r 30 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 128k FinalRender_App_3_1.ts

6. 这样就可以转换成功呢。

7. 判断是安卓还是ios

  var u = navigator.userAgent;

  var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端

  var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

8.只有在安卓手机上video的层级才会最顶级，ios和普通浏览器上是正常的，所以这里可以做个判断。

9. console.log('${x} == false'.replace(/\${(.*?)}/g, '')) 这里结果为===false

望采纳！！点击该回答右侧的“采纳”按钮即可采纳！！
要让视频在网页上居中，你可以使用如下CSS样式：

#myVideo {
display: block;
margin: 0 auto;
}

要让视频的高度匹配到手机平板上，你可以设置视频的高度为100%：

#myVideo {
height: 100%;
}

你还可以使用媒体查询来设置不同设备的视频尺寸：

@media (min-width: 600px) {
#myVideo {
width: 500px;
height: 300px;
}
}

@media (max-width: 600px) {
#myVideo {
width: 300px;
height: 200px;
}
}

这样，当网页在大屏幕上显示时，视频的尺寸为500x300；在小屏幕（如手机平板）上显示时，视频的尺寸为300x200。