0

背景用のビデオと矢印の小さな画像を含む HTML ファイルがあります。いくつかの CSS ファイルを参照しており、ほとんどの場合、かなり標準的です。私はBracketsというプログラムでコードを書きました 。Braketsには、コーディング中にブラウザでサイトを実行する機能があるため、リアルタイムで変更を確認でき、ページは完璧に見えますが、ブラウザで手動でHTMLファイルを開くと、黒い画面しか表示されません.

 <!DOCTYPE html>

<html>
    <head>

<link rel="stylesheet" href="/CSS/main.css">

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>LA Apparel</title>
  <style>
  #video-bg {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    overflow: hidden;
  }
  #video-bg > video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  /* 1. No object-fit support: */
  @media (min-aspect-ratio: 16/9) {
    #video-bg > video { height: 300%; top: -100%; }
  }
  @media (max-aspect-ratio: 16/9) {
    #video-bg > video { width: 300%; left: -100%; }
  }
  /* 2. If supporting object-fit, overriding (1): */
  @supports (object-fit: cover) {
    #video-bg > video {
      top: 0; left: 0;
      width: 100%; height: 100%;
      object-fit: cover;
    }
  }
  </style>


</head>
<body>
<div id="video-bg">
  <video autoplay="autoplay" loop="true">
    <source type="video/mp4" src="/dasvi.mp4">
    <source type="video/webm" src="/dasvi.webm">
  </video>
</div>

        <img class="arr" src="/images/prenup/arrow.png">



</body>
</html>

私の質問は次のとおりです:私のコードまたはファイルを整理/参照する方法に問題がありますか?それとも、ブラウザーがローカルベースのビデオファイルをレンダリングしないのは通常のことですか?サーバーに配置すると機能しますか? ありがとう。

参照用の画像左はブラケットで実行されているファイルです右はクロムで手動で実行されています

4

1 に答える 1

5

URL はドキュメント ルートからの相対パスです。に取り組んでいるため、内部的にはこれは機能しますが、ブラウザで表示すると、存在しないと確信している127.0.0.1:33567を探し始めています;)file:///dasvi.mp4

ローカルでテストする場合は、Brackets が行っているように、サーバー上で実行する必要があります。そうしないと、このような問題が発生します。

于 2014-07-07T09:23:36.707 に答える