在同一页面上的多个视频上显示“播放”按钮

Question

在Javascript方面，我是一个完全的新手(复制和粘贴那种家伙;)...所以我在尝试弄清楚如何执行以下操作时遇到了一些问题：

• 我有一个幻灯片库，其中有 2 个 mp4 视频在同一集中
• 我找到了一些在mp4视频上覆盖播放按钮的javascript。
• 然而。。。当我有一个视频时，代码工作正常 - 但是当我放置第二个视频时，我无法让覆盖的箭头在两个视频上工作......

冲突类/变量(或类似的东西(存在明显的问题 - 但我无法弄清楚......

.HTML：

<div class="swiper-slide">
    <div class="video-wrapper">
        <video controls preload="metadata" class="pure-img video" poster="assets/posters/poster_adele-BBC.jpg">
            <source src="http://d1wv6pnepp7p5s.cloudfront.net/AA_BBC_ALL_CUTDOWN_02.mp4" type="video/mp4"></source>
        </video>
    </div>
</div>         
<div class="swiper-slide">
    <div class="video-wrapper-two">
        <video controls preload="metadata" class="pure-img video" poster="assets/posters/poster_adele-BBC.jpg">
            <source src="http://d1wv6pnepp7p5s.cloudfront.net/AA_BBC_ALL_CUTDOWN_02.mp4" type="video/mp4"></source>
        </video>
    </div>
</div>    

Javascript：

<script>
var videoPlayButton,
videoWrapper = document.getElementsByClassName('video-wrapper')[0],
video = document.getElementsByTagName('video')[0],
videoMethods = {
    renderVideoPlayButton: function() {
        if (videoWrapper.contains(video)) {
            this.formatVideoPlayButton()
            video.classList.add('has-media-controls-hidden')
            videoPlayButton = document.getElementsByClassName('video-overlay-play-button')[0]
            videoPlayButton.addEventListener('click', this.hideVideoPlayButton)
        }
    },
    formatVideoPlayButton: function() {
        videoWrapper.insertAdjacentHTML('beforeend', '
            <svg class="video-overlay-play-button" viewBox="0 0 200 200" alt="Play video">
                <circle cx="100" cy="100" r="90" fill="#000" stroke-width="5" stroke="#fff"/>
                <polygon points="70, 55 70, 145 145, 100" fill="#fff"/>
            </svg>
        ')
    },
    hideVideoPlayButton: function() {
        video.play()
        videoPlayButton.classList.add('is-hidden')
        video.classList.remove('has-media-controls-hidden')
        video.setAttribute('controls', 'controls')
    }
}
videoMethods.renderVideoPlayButton()
</script>

javascript 可以很好地处理第一个包装器，我只是很难让第二个包装器正确显示"播放"按钮......

任何帮助表示赞赏。

Answer 1

<div class="swiper-slide"> <div class="video-wrapper-two"> <video controls preload="metadata" class="pure-img video" poster="assets/posters/poster_adele-BBC.jpg"> <source src="http://d1wv6pnepp7p5s.cloudfront.net/AA_BBC_ALL_CUTDOWN_02.mp4" type="video/mp4"></source> </video> </div> </div>

因此，让我们关注这些行。HTML 中的第一个错误是将 'video-wrapper' 类重命名为'video-wrapper-two'第二个元素。如果您计划在 JavaScript 中重用这些元素，则必须相同。

第二个错误是仅引用数组中的第一个'video-wrapper'，而不是获取所有 videoWrapper = document.getElementsByClassName('video-wrapper'([0]

相反，您将需要这个

videoWrappers = document.getElementsByClassName('video-wrapper');
videos = document.getElementsByTagName('video');

第三个问题需要更多的代码，因为目前您将单个 videoElement 项烘焙到函数中，因此您无法在每个函数上调用它。因此，与其从函数引用视频，不如将其作为引用(作为函数参数(传递，以便在调用它时可以执行类似操作

for(var i = 0; i < videWrappers.length; i++){
    // it will be called on each video element one by one
    videoMethods.renderVideoPlayButton(videoWrappers[i], video[i]); 
}

关键点是永远不要将变量烘焙到函数中，而是始终使用函数参数，以便在需要时可以重用这些函数。

Answer 2

问题是

videoWrapper = document.getElementsByClassName('video-wrapper')[0],
video = document.getElementsByTagName('video')[0],

它仅指定第一组

您应该将其作为函数并调用两次。

var videoPlayButton;
function addMethod(video,videoWrapper){
 return {
    renderVideoPlayButton: function() {
      if (videoWrapper.contains(video)) {
        this.formatVideoPlayButton()
        video.classList.add('has-media-controls-hidden')
        videoPlayButton = document.getElementsByClassName('video-overlay-play-button')[0]
        videoPlayButton.addEventListener('click', this.hideVideoPlayButton)
      }
    },
    formatVideoPlayButton: function() {
      videoWrapper.insertAdjacentHTML('beforeend', '
            <svg class="video-overlay-play-button" viewBox="0 0 200 200" alt="Play video">
                <circle cx="100" cy="100" r="90" fill="#000" stroke-width="5" stroke="#fff"/>
                <polygon points="70, 55 70, 145 145, 100" fill="#fff"/>
            </svg>
        ')
    },
    hideVideoPlayButton: function() {
      video.play()
      videoPlayButton.classList.add('is-hidden')
      video.classList.remove('has-media-controls-hidden')
      video.setAttribute('controls', 'controls')
    }
  }
}
addMethod(document.getElementsByTagName('video')[0],document.getElementsByClassName('video-wrapper')[0]).renderVideoPlayButton();
addMethod(document.getElementsByTagName('video')[1],document.getElementsByClassName('video-wrapper-two')[0]).renderVideoPlayButton();

<div class="swiper-slide">
  <div class="video-wrapper">
    <video controls preload="metadata" class="pure-img video" poster="assets/posters/poster_adele-BBC.jpg">
                        <source src="http://d1wv6pnepp7p5s.cloudfront.net/AA_BBC_ALL_CUTDOWN_02.mp4" type="video/mp4"></source>
                    </video>
  </div>
</div>
<div class="swiper-slide">
  <div class="video-wrapper-two">
    <video controls preload="metadata" class="pure-img video" poster="assets/posters/poster_adele-BBC.jpg">
                        <source src="http://d1wv6pnepp7p5s.cloudfront.net/AA_BBC_ALL_CUTDOWN_02.mp4" type="video/mp4"></source>
                    </video>
  </div>
</div>