在同一页面上的多个视频上显示播放按钮 [英] Displaying a Play button on Multiple videos on the same page

查看：33
本文介绍了在同一页面上的多个视频上显示播放按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

>
  • 我有一个幻灯片库，里面有 2 个 mp4 视频在同一组中
  • 我发现了一些在 mp4 视频上覆盖播放按钮的 javascript
  • 但是......当我有一个视频时，代码工作正常 - 但是当我放置第二个视频时，我无法让重叠的箭头同时工作......

冲突的类/变量(或类似的东西)有一个明显的问题 - 但我想不通......

HTML:

<div class="video-wrapper"><视频控件 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></视频>

<div class="swiper-slide"><div class="video-wrapper-two"><视频控件 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></视频>

Javascript:

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

感谢任何帮助.

解决方案

问题是

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

只指定第一组

您应该将其设为函数并调用两次.

var videoPlayButton;功能添加方法(视频，视频包装器){返回 {渲染视频播放按钮:函数(){如果(videoWrapper.contains(视频)){this.formatVideoPlayButton()video.classList.add('has-media-controls-hidden')videoPlayButton = document.getElementsByClassName('video-overlay-play-button')[0]videoPlayButton.addEventListener('click', this.hideVideoPlayButton)}},格式视频播放按钮:函数(){videoWrapper.insertAdjacentHTML('beforeend', '\<svg class="video-overlay-play-button" viewBox="0 0 200 200" alt="播放视频">\<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>\')},隐藏视频播放按钮:函数(){视频播放()videoPlayButton.classList.add('is-hidden')video.classList.remove('has-media-controls-hidden')video.setAttribute('控件', '控件')}}}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="video-wrapper"><视频控件 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></视频>

<div class="swiper-slide"><div class="video-wrapper-two"><视频控件 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></视频>

I'm a complete novice when it comes to Javascript (& copy and paste kind of guy ;)... so I'm having a bit of a problem trying to figure out how to do the following:

There's an obvious problem with clashing classes / variables (or something to that effect) - but I can't figure it out...

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>

The javascript handles the 1st wrapper fine, I'm just having difficulty getting the 2nd wrapper to display the Play button correctly...

Any help appreciated.

解决方案

The issue is

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

It specify first set only

You should make it as a function and invoke twice.

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>

这篇关于在同一页面上的多个视频上显示播放按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆