Question

我的页面上加载了html5视频，如下所示：

＆＃39;

  <div class="row">

      <video controls class="vid-center" poster="<?php echo get_template_directory_uri(); ?>/img/video-bg.png" id="video-id">
        <div class="video-overlay">logo and play bitton here logo and play bitton here </div>
        <source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
        <source src="movie.ogg" type="video/ogg">
        Your browser does not support the video tag. </video>
  </div>
    <div class="video-cont"></div>
  </section>
    <div class="row">

        <div class="large-3 small-4 columns">
          <img src="<?php echo get_template_directory_uri(); ?>/img/thumb-vid1.png" alt=""/>
          <h4>Video name 1</h4>
          <p>Lorum ipsum neg reyo sum tomenyen</p>
        </div>

        <div class="large-3 small-4 columns">
          <img src="<?php echo get_template_directory_uri(); ?>/img/thumb-vid2.png" alt=""/>
          <h4>Video name 1</h4>
          <p>Lorum ipsum neg reyo sum tomenyen</p>
        </div>

        <div class="large-3 small-4 columns">

          <img src="<?php echo get_template_directory_uri(); ?>/img/thumb-vid3.png" alt=""/>
          <h4>Video name 1</h4>
          <p>Lorum ipsum neg reyo sum tomenyen</p>
        </div>
        <div class="large-3 hide-for-small-only columns">

          <img src="<?php echo get_template_directory_uri(); ?>/img/thumb-vid4.png" alt=""/>
          <h4>Video name 1</h4>
          <p>Lorum ipsum neg reyo sum tomenyen</p>
        </div>
      </div>

＆＃39;

我正在尝试创建一个基本库，因此当用户选择/点击/按下其中一个缩略图时，它会将新视频加载到视频播放器中，即根据单击的img / div更改视频源。如果单击缩略图，则将字符串src加载到播放器并自动播放。

这可以用JavaScript来改变当前的视频src吗？

非常感谢任何帮助。

Answer 1

这个演示有两个方面：

上半部分有四个div，加载后会动态生成一个视频。
下半部分有一个视频和一个播放列表。视频元素将播放播放列表中点击的内容。

他们的共同点是他们共享相同的视频和图像文件。基本上，这个演示展示了在页面上放置多个视频的两种方法。

顶部示例以4个普通div开始。
- loadPlayers()。它会：
  - 将4个div收集到NodeList中。
  - 将NodeList转换为数组。
  - Array.prototype.map.call()还会调用一个匿名函数来收集每个div id并将它们传递给下一个函数...
- struct(ID)负责构建视频元素。
  - loadPlayers()中的ID现在会被处理为字符串，这些字符串将为每个视频定义src的值。
  - 视频和来源元素由createElement()
  - 属性由setAttribute()
  - 最后，每个视频都会添加到appendChild()的相应div中。
底部示例从开发人员提供的字符串数组中动态创建播放列表（可以对其进行修改，以便用户可以与创建播放列表进行交互。）
- generateList(arr, str)需要一个字符串数组和一个用于添加播放列表项的元素。第一个参数arr是一个数组，每个字符串代表一个视频/图像的文件名（无扩展名）。第二个参数是一个字符串，它必须在语法上像选择器。例如：
  
  <div id="vid3"></div> = "#vid3" <nav></nav> = "nav" <main class="box"></main> = ".box" <input type="number"/> = "input[type='number']"
- 虽然此参数可以是任何元素，但建议ul，ol，dl或nav更适合托管播放列表项。
- 使用array.map()将函数eachItem()应用于每个数组元素，然后将其作为完整的播放列表返回;每个项目都是一个带有剪切背景图像的锚点。
- 单击每个项目时，eventListener将触发函数playSelect()

developers.facebook.com

PLUNKER

<强>段

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Video Gallery</title>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      font: 400 16px/1.45 'Verdana';
    }
    
    body {
      position: relative;
      background: #111;
      color: #EEE;
    }
    
    .gallery {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      width: 100vw;
      height: 50vh;
    }
    
    #sec2 {
      justify-content: center;
    }
    
    .vid {
      width: 240px;
      flex 0 2 auto;
    }
    
    .solo {
      width: 480px;
      flex: 0 2 auto;
    }
    
    video {
      width: 100%;
      height: auto;
    }
    
    .list {
      border: 3px inset #fc3;
      margin: 0 10px;
    }
    
    .list a {
      text-decoration: none;
      cursor: pointer;
      display: block;
      width: 75px;
      height: 75px;
      background-repeat: no-repeat;
      background-size: cover;
      color: #00f;
      font-size: 1rem;
      border-bottom: 1px solid #fc0;
    }
    
    .list a:hover {
      color: #0ff;
    }
    
    @media screen and (max-width: 768px) {
      #sec1 {
        justify-content: flex-start;
      }
      #sec2 {
        justify-content: flex-end;
      }
      .vid {
        flex: 0 2 auto;
        width: 160px;
      }
      .solo {
        flex: 0 2 auto;
        width: 320px;
      }
    }
  </style>
</head>

<body>
  <section id="sec1" class="gallery">
    <div id="vid1" class="vid"></div>
    <div id="vid2" class="vid"></div>
    <div id="vid3" class="vid"></div>
    <div id="vid4" class="vid"></div>
  </section>

  <section id="sec2" class="gallery">
    <div id="vid5" class="solo">
      <video id="vid5v" poster="https://glpjt.s3.amazonaws.com/so/av/vid5.png" controls=true>
        <source src="https://glpjt.s3.amazonaws.com/so/av/vid5.mp4" type="video/mp4">
      </video>
    </div>
    <nav id="vNav5" class="list"></nav>
  </section>

  <script>
    var vNav5 = document.getElementById('vNav5');
    var playlist = ['vid1', 'vid2', 'vid3', 'vid4'];


    function loadPlayers() {
      var divs = document.querySelectorAll('.vid');
      var ids = Array.prototype.map.call(divs, function(obj) {
        var ID = obj.id;
        return vStruct(ID);
      });
    }

    function vStruct(id) {
      var vTag = document.createElement('video');
      var vSrc = document.createElement('source');

      var vDiv = document.getElementById(id);
      var vIDv = id.toString();
      vTag.id = vIDv + 'v';
      var vUrl = 'https://glpjt.s3.amazonaws.com/so/av/';
      var vPng = vUrl + id + '.png';
      var vMp4 = vUrl + id + '.mp4';

      vTag.setAttribute('poster', vPng);
      vTag.setAttribute('controls', true);

      vSrc.setAttribute('src', vMp4);
      vSrc.setAttribute('type', 'video/mp4');

      vDiv.appendChild(vTag);
      vTag.appendChild(vSrc);

    }

    function generateList(vArr, vStr) {
      var vTgt = document.querySelector(vStr);
      var lArr = vArr.map(eachLink);
      lArr.forEach(function(obj) {
        vTgt.appendChild(obj);
      });
    }

    function eachLink(id) {
      var ID = id.toString();
      var vUrl = 'https://glpjt.s3.amazonaws.com/so/av/';
      var vLink = document.createElement('a');
      vLink.setAttribute('href', vUrl + ID + '.mp4');
      vLink.textContent = ID;
      vLink.style.backgroundImage = "url('" + vUrl + ID + ".png')";
      return vLink;
    }

    vNav5.addEventListener('click', playSelect, false);

    function playSelect(e) {
      e.preventDefault();

      if (e.currentTarget !== e.target) {
        var choice = e.target.href;
        var parent = e.target.parentElement;
        var uncle = parent.previousElementSibling;
        var vid = uncle.querySelector('video');
        if (vid.playing) {
          vid.pause();
        }
        vid.src = "";
        vid.src = choice;
        vid.load();
        vid.play();
        e.stopPropagation();
      }
    }

    loadPlayers();

    generateList(playlist, '#vNav5');
  </script>
</body>

</html>

在链接/视频上加载新视频src单击html5

1 个答案: