Question

对于Javascript（以及复制和粘贴类型的人），我是完全新手...所以我在尝试弄清楚如何执行以下操作时遇到了一些问题：

我有一个幻灯片库，在同一组中有2个mp4视频
我发现一些javascript覆盖了mp4视频上的播放按钮
然而......当我有一个视频时，代码工作正常 - 但是当我放置第二个视频时，我没有得到覆盖的两个箭头......

关于类/变量的冲突（或者那种效果）存在一个明显的问题 - 但我无法弄明白......

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],

仅指定第一组

你应该把它作为一个函数并调用两次。

＆＃13;

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();

＆＃13;

<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>

＆＃13;

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

2 个答案: