javascript - 在 img 点击播放视频

Question

我试图在图像点击上播放我的本地视频，但不知何故，视频无法播放。它显示视频“框”，但视频不会播放。单击图像后如何播放视频的任何想法？

非常感谢！ HTML 部分：假设每个 img div 中都有视频 - 对于这个例子，我只包含了 1 个视频

<div class="container-gallery" id="portfolio">
        <h1>Portfolio gallery</h1>
        <div class="wrapper-gallery" id="index-gallery">
            <div class="gallery-img img1">
                <div><a href="#">First image</a></div>
                <video class="hidden" width="1000" controls>
                    <source src="../video/#6.mp4" type="video/mp4">
                 </video>
            </div>
            <div class="gallery-img img2">
                <div><a href="#">Second image</a></div>
            </div>
            <div class="gallery-img img3">
                <div><a href="#">Third image</a></div>
            </div>
            <div class="gallery-img img4">
                <div><a href="#">Fourth image</a></div>
            </div>
            <div class="gallery-img img5">
                <div><a href="#">Fifth image</a></div>
            </div>
            <div class="gallery-img img6">
                <div><a href="#">Sixth image</a></div>
            </div>
            <div class="gallery-img img7">
                <div><a href="#">Seventh image</a></div>
            </div>
        </div>
    </div>

CSS部分：

.img-window {
    width: 90vw;
    height: 92vh;
    background-color: rgba(0,0,0,.8);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.img-window img {
   max-height: 80vh;
   max-width: 80vw;
   z-index: 1000;
}

.hidden {
    display: none;
}

.show {
    display: block;
}

Javascript 部分

let galleryImages = document.querySelectorAll('.gallery-img');
let video = document.querySelector('video');
let getLatestOpenedImg;

if(galleryImages) {
    galleryImages.forEach(function(image, index) {
        image.onclick = function(e) {
            e.preventDefault();

            getLatestOpenedImg = index + 1;
            let container = document.body;
            let newVidWindow = document.createElement("div");
            container.appendChild(newVidWindow);
            newVidWindow.setAttribute("class", "img-window");
            newVidWindow.setAttribute("onclick", "closeImg()");

            newVidWindow.appendChild(video);
            video.classList.remove('hidden');
            video.classList.add('show');
            video.play();
        }
    });
}


function closeImg() {
    document.querySelector(".img-window").remove();
} 

标签： javascripthtmlcss

Answer 1

这是您的代码未更改，它似乎工作正常。

会不会是浏览器问题阻止了嵌入式视频的播放？

let galleryImages = document.querySelectorAll('.gallery-img');
let video = document.querySelector('video');
let getLatestOpenedImg;

if(galleryImages) {
    galleryImages.forEach(function(image, index) {
        image.onclick = function(e) {
            e.preventDefault();

            getLatestOpenedImg = index + 1;
            let container = document.body;
            let newVidWindow = document.createElement("div");
            container.appendChild(newVidWindow);
            newVidWindow.setAttribute("class", "img-window");
            newVidWindow.setAttribute("onclick", "closeImg()");

            newVidWindow.appendChild(video);
            video.classList.remove('hidden');
            // not needed
            //video.classList.add('show'); 
            video.play();
        }
    });
}


function closeImg() {
    document.querySelector(".img-window").remove();
} 

.img-window {
    width: 90vw;
    height: 92vh;
    background-color: rgba(0,0,0,.8);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.img-window img {
   max-height: 80vh;
   max-width: 80vw;
   z-index: 1000;
}

.hidden {
    display: none;
}

/* not needed
.show {
    display: block;
}
*/

<div class="container-gallery" id="portfolio">
  <h1>Portfolio gallery</h1>
  <div class="wrapper-gallery" id="index-gallery">
    <div class="gallery-img img1">
      <div><a href="#">First image</a></div>
      <video class="hidden" width="1000" controls>
        <source
          src="https://interactive-examples.mdn.mozilla.net/media/examples/flower.mp4"
          type="video/mp4">
      </video>
    </div>
    <div class="gallery-img img2">
      <div><a href="#">Second image</a></div>
    </div>
    <div class="gallery-img img3">
      <div><a href="#">Third image</a></div>
    </div>
    <div class="gallery-img img4">
      <div><a href="#">Fourth image</a></div>
    </div>
    <div class="gallery-img img5">
      <div><a href="#">Fifth image</a></div>
    </div>
    <div class="gallery-img img6">
      <div><a href="#">Sixth image</a></div>
    </div>
    <div class="gallery-img img7">
      <div><a href="#">Seventh image</a></div>
    </div>
  </div>
</div>