web-dev-qa-db-ja.com

ウェブサイトのHTML / CSSにバックグラウンドビデオループを配置する方法

私は自分のウェブサイトに背景ビデオとしてビデオを載せようとしています。私はたくさんの研究をしましたが、うまくいきません。理由はわかりません。

私のhtmlには次のものがあります。

<video id="bgVideo" controls preload="true" autoplay loop muted>
    <source src="../images/Home_Page.mp4" type="video/mp4" >
    <source src="../images/Home_Page.ogv" type="video/ogg" >    
    <source src="../images/Home_Page.webm" type="video/webm" > 
</video>     
<script src="scripts/html5ext.js" type="text/javascript"></script>

そして私のCSSで私は持っています：

body
{
background:  url("../images/Home_Page.png") no-repeat fixed center;
}

video#bgVideo {
position: fixed;
right: 0;
bottom: 0;
width: auto;
min-width: 100%;
height: auto;
min-height: 100%;
z-index: -100;    
background-size: cover;
}

ただし、ビデオは再生されず、背景は白のままです。この問題を解決するための提案はありますか？

どうもありがとうございます

htmlcssvideo
7
duhzecca

これはうまくいくはずです

   <video id="bgVideo" controls preload="true" autoplay loop muted>
      <source src="Home_Page.mp4" type="video/mp4" > 
       <source src="Home_Page.ogv" type="video/ogv" >    
      <source src="Home_Page.webm" type="video/webm" > 

   </video>

また、htaccessファイルを作成するか、htaccessファイルを修正して以下を含める必要があります。

   AddType video/mp4 .mp4 .m4v
   AddType video/ogg .ogv
   AddType video/webm .webm

これを行うのに役立つチュートリアルは ここ

3
Rachel Gallen
        <div class="video-container">

            <video autoplay loop muted width="100%">
                <source src="Path To mp4 Video" type="video/mp4" />
                <source src="Path To webm Video" type="video/webm" />
            </video>                
            <div >
                <img src="path to Image" alt="">
            </div>
            <!-- If Videos are not supported this image will act as cover image-->
        </div>
0
user6440121

このコードは、フルスクリーンビデオを提供するために私のために働いています。

var vid = document.getElementById("bgvid");
var pauseButton = document.querySelector("#polina button");

if (window.matchMedia('(prefers-reduced-motion)').matches) {
    vid.removeAttribute("autoplay");
    vid.pause();
    pauseButton.innerHTML = "Paused";
}

function vidFade() {
  vid.classList.add("stopfade");
}

vid.addEventListener('ended', function()
{
// only functional if "loop" is removed 
vid.pause();
// to capture IE10
vidFade();
}); 


pauseButton.addEventListener("click", function() {
  vid.classList.toggle("stopfade");
  if (vid.paused) {
    vid.play();
    pauseButton.innerHTML = "Pause";
  } else {
    vid.pause();
    pauseButton.innerHTML = "Paused";
  }
})
body {
  margin: 0;
  background: #000; 
}
video { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
 background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
  background-size: cover;
  transition: 1s opacity;
}
.stopfade { 
   opacity: .5;
}

#polina { 
  font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
  font-weight:100; 
  background: rgba(0,0,0,0.3);
  color: white;
  padding: 2rem;
  width: 33%;
  margin:2rem;
  float: right;
  font-size: 1.2rem;
}
h1 {
  font-size: 3rem;
  text-transform: uppercase;
  margin-top: 0;
  letter-spacing: .3rem;
}
#polina button { 
  display: block;
  width: 80%;
  padding: .4rem;
  border: none; 
  margin: 1rem auto; 
  font-size: 1.3rem;
  background: rgba(255,255,255,0.23);
  color: #fff;
  border-radius: 3px; 
  cursor: pointer;
  transition: .3s background;
}
#polina button:hover { 
   background: rgba(0,0,0,0.5);
}

a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  background:rgba(0,0,0,0.5);
  padding: .5rem;
  transition: .6s background; 
}
a:hover{
  background:rgba(0,0,0,0.9);
}
@media screen and (max-width: 500px) { 
  div{width:70%;} 
}
@media screen and (max-device-width: 800px) {
  html { background: url(https://thenewcode.com/assets/images/polina.jpg) #000 no-repeat center center fixed; }
  #bgvid { display: none; }
}
<video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline autoplay muted loop>
  <!-- WCAG general accessibility recommendation is that media such as background video play through only once. Loop turned on for the purposes of illustration; if removed, the end of the video will fade in the same way created by pressing the "Pause" button  -->
<source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">
<source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">
</video>
<div id="polina">
<h1>try this</h1>

<p>your text or elements</p>
   
<button>Pause</button>
</div>
0
Khagesh