蘑菇视频电脑版搜索时横竖屏总出问题？用这份模板别硬扛

蘑菇视频电脑版搜索时横竖屏总出问题？用这份模板别硬扛第1张

在电脑上浏览蘑菇视频或自己嵌入视频时，常见的问题有：竖屏视频被强行拉宽、横屏视频被裁剪、播放器在不同尺寸下显示异常，甚至搜索结果里的预览图方向不对。遇到这种情况，别盲目改源文件，先用一个响应式且能自动识别方向并根据需求旋转或适配的模板，能省很多时间和麻烦。下面给出一套可直接部署和嵌入的解决方案，以及在 Google 网站（Google Sites）上的实用嵌入方法与常见排查思路。

一、问题成因简要（快速了解）

视频本身宽高比（videoWidth / videoHeight）和播放容器不匹配，导致拉伸或黑边。
没有使用 object-fit / aspect-ratio 等现代 CSS 属性来处理适配。
有些播放器或嵌入方式忽略视频元数据（比如旋转元信息），不会自动旋转。
Google Sites 的新版本不允许内嵌 JS，因此直接粘 HTML+JS 到页面会被过滤，需要通过 iframe 域托管再嵌入。

二、思路概述（几步走）

创建一个可响应的容器，保持中间对齐并能根据比例切换样式（横屏/竖屏）。
用 CSS 的 object-fit、aspect-ratio（兼容性好时）来控制展示；若浏览器不支持，用 fallback。
通过 JS 在视频元数据加载后判断宽高，自动添加 class（.horizontal / .vertical），必要时使用 transform: rotate(90deg) 来修正方向。
若在 Google Sites 发布，将该页面托管（GitHub Pages/Netlify/其他）并通过 iframe 嵌入。

三、可直接使用的模板（index.html）说明：这是一个自包含页面，直接放到静态托管服务（如 GitHub Pages / Netlify）即可使用并通过 iframe 嵌入到 Google 网站里。替换标签的 src 或改成 iframe 嵌入外部播放器也可。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>视频自适应模板 - 蘑菇视频</title>
  <style>
    :root{
      --bg:#0f0f0f;
      --panel:#111;
      --accent:#2db7f5;
    }
    html,body{height:100%;margin:0;background:var(--bg);color:#fff;font-family:Arial,Helvetica,sans-serif}
    .wrap{max-width:1200px;margin:24px auto;padding:18px;background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));border-radius:8px}
    h1{font-size:18px;margin:0 0 12px}
    .player-area{position:relative;width:100%;background:#000;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center;}
    /* 最大宽度和高度的限制，按容器自适应 */
    .player-area .video-outer{width:100%;max-height:72vh;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
    .video-outer video,
    .video-outer iframe{
      max-width:100%;
      max-height:100%;
      width:auto;
      height:auto;
      object-fit:contain; /* 避免拉伸 */
      transition:transform .25s ease, width .2s ease, height .2s ease;
      display:block;
    }

    /* 区分横竖屏后的样式 */
    .video-outer.horizontal video,
    .video-outer.horizontal iframe{
      width:100%;
      height:auto;
    }
    .video-outer.vertical video,
    .video-outer.vertical iframe{
      height:80vh;
      width:auto;
    }

    /* 如果视频需要旋转（有些竖拍的元数据错位），可使用 .rotated 添加修正 */
    .video-outer.rotated video{
      transform: rotate(90deg) scale(1);
    }

    /* 控件区 */
    .controls{display:flex;gap:8px;align-items:center;margin-top:12px}
    .btn{background:var(--panel);border:1px solid rgba(255,255,255,0.04);padding:8px 12px;border-radius:6px;color:#fff;cursor:pointer}
    .note{font-size:13px;color:#cfcfcf;margin-top:10px}
    @media (max-width:600px){
      h1{font-size:16px}
      .video-outer.vertical video{height:60vh}
    }
  </style>
</head>
<body>
  <div class="wrap">
    <h1>蘑菇视频 - 横竖屏自适应模板（桌面/嵌入版）</h1>

    <div class="player-area">
      <div class="video-outer" id="playerWrap">
        <!-- 替换下面的 src 为你的蘑菇视频下载链接或托管链接（支持 mp4、webm）。
             如果使用第三方播放器 iframe，请把 <video> 换为 <iframe src="..."></iframe> -->
        <video id="videoEl" controls playsinline preload="metadata" crossorigin="anonymous">
          <source src="your-video-file.mp4" type="video/mp4">
          你的浏览器不支持 video 标签。
        </video>
      </div>
    </div>

    <div class="controls">
      <button class="btn" id="fitBtn">切换适配：Contain / Cover</button>
      <button class="btn" id="rotateBtn">手动旋转 90°</button>
      <button class="btn" id="forceHorizontal">强制横屏展示</button>
      <button class="btn" id="forceVertical">强制竖屏展示</button>
      <button class="btn" id="resetBtn">重置</button>
    </div>

    <div class="note">
      使用方法：上传或替换 video src，页面会在元数据加载后自动检测宽高并在容器上加上 horizontal / vertical 类，必要时可手动旋转或强制某一方向。若在 Google Sites 使用，请将此页面托管并以 iframe 嵌入。
    </div>
  </div>

  <script>
    (function(){
      const v = document.getElementById('videoEl');
      const wrap = document.getElementById('playerWrap');
      let isCover = false;
      let rotated = false;

      function applyOrientation(){
        // 有些浏览器在 metadata 未完全可用时读取为0，确保等待 loadedmetadata
        const w = v.videoWidth || v.clientWidth || 0;
        const h = v.videoHeight || v.clientHeight || 0;
        // 若都为0，不处理
        if(!w || !h) return;
        wrap.classList.remove('horizontal','vertical');
        if(w >= h){
          wrap.classList.add('horizontal');
        } else {
          wrap.classList.add('vertical');
        }
        // 如果视频文件里有旋转信息（部分手机会），也可以根据宽高推断是否需要旋转（可视需要调整阈值）
        // 例如：文件本来是竖拍，但 metadata 显示宽大于高时可能已被内嵌旋转
      }

      v.addEventListener('loadedmetadata', applyOrientation);
      // 有些情况下 video 的尺寸在 resize 时也要重新判断
      window.addEventListener('resize', applyOrientation);

      // 控件事件
      document.getElementById('fitBtn').addEventListener('click', function(){
        isCover = !isCover;
        v.style.objectFit = isCover ? 'cover' : 'contain';
        this.textContent = isCover ? '切换适配：Cover / Contain' : '切换适配：Contain / Cover';
      });

      document.getElementById('rotateBtn').addEventListener('click', function(){
        rotated = !rotated;
        if(rotated){
          wrap.classList.add('rotated');
        } else {
          wrap.classList.remove('rotated');
        }
      });

      document.getElementById('forceHorizontal').addEventListener('click', function(){
        wrap.classList.remove('vertical'); wrap.classList.add('horizontal'); wrap.classList.remove('rotated');
      });
      document.getElementById('forceVertical').addEventListener('click', function(){
        wrap.classList.remove('horizontal'); wrap.classList.add('vertical'); wrap.classList.remove('rotated');
      });
      document.getElementById('resetBtn').addEventListener('click', function(){
        wrap.classList.remove('horizontal','vertical','rotated');
        v.style.objectFit = 'contain';
        isCover = false; rotated = false;
      });

      // 若视频来自跨域且 metadata 无法读取，考虑在服务器端获取视频宽高或将视频托管到同源
    })();
  </script>
</body>
</html>

四、在 Google 网站（新 Sites）中如何使用这套模板

直接粘 HTML+JS：新 Google Sites 会过滤 JS，所以不行。
推荐做法：把上面的 index.html 放到托管服务（GitHub Pages / Netlify / Vercel 等），得到一个可公开访问的 URL（例如 https://username.github.io/your-video-player/）。
在 Google Sites 编辑器：插入 -> 嵌入 -> 输入 URL -> 选择“嵌入代码”的 iframe 方式或直接 URL。这样页面会以 iframe 形式加载，JS 和样式都会生效。
若使用第三方播放器（例如蘑菇视频提供的 iframe 播放页），将 iframe 嵌入到模板中的 video 位或直接将外部 iframe 放入托管页面中，再把托管页面嵌入 Google Sites。

五、常见问题与排查

视频显示拉伸/变形：检查 object-fit 设置，建议用 contain 保持完整画面，cover 在竖屏转横屏预览会裁剪。
元数据方向错误：部分手机录制的视频带有旋转标签，浏览器表现各不相同。可以通过 JS 在 loadedmetadata 后判断宽高并手动旋转，或者用 ffmpeg 在上传前做一次标准化：ffmpeg -i in.mp4 -vf transpose=1 -c:a copy out.mp4（仅示例，按需调整）。
跨域（CORS）问题导致无法读取 videoWidth/videoHeight：确保视频托管允许跨域或与托管页面同源。
iframe 嵌入后黑屏或播放受限：检查浏览器自动播放策略（autoplay / muted），以及引用的 URL 是否允许被嵌入（X-Frame-Options）。

六、进阶建议（可选）

若你需要在搜索结果中展示预览图并保证方向正确，建议生成单独的缩略图（thumbnail）并保证其方向与实际播放一致，直接引用缩略图而非让浏览器截取视频首帧。
对大量视频批量处理方向和编码问题，可在服务器端使用 ffmpeg 标准化（转封装、去旋转标记、生成多分辨率 MP4/HLS），再供前端调用。
如果对用户体验有高要求，考虑集成现成的播放器（Video.js、plyr 等），配合插件统一处理方向和适配逻辑。

结语遇到横竖屏展示混乱，先不要急着改源站或抱怨播放器。把视频用一个能识别宽高并按规则展示的容器包起来，必要时在服务器端做简单标准化，最后通过 iframe 把托管页面嵌入 Google Sites，这是既稳妥又兼容的做法。把上面的模板上传到你的静态托管，替换 src，按需调整样式，就能快速解决大多数横竖屏适配问题。需要我把这个模板打包成一个可直接上传到 GitHub Pages 的仓库结构并给出详细部署步骤吗？

蘑菇视频电脑版搜索时横竖屏总出问题？用这份模板别硬扛

相关文章