javascript - 嵌入视频播放器播放按钮一次播放所有视频播放器

标签 javascript html css video

我正在尝试使用自定义视频播放器在我的网站中嵌入视频，当我嵌入多个视频时，当我按下任何视频上的播放按钮时，它会同时播放所有视频，而不是只播放我的视频点击播放。代码项如下:

转到下面的 jsfiddle 并运行代码，然后在视频上按播放，您会看到它会同时播放两个视频，而不是您单击的那个。

HTML

<html>
    <head>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="script.js"></script>
        <link rel="stylesheet" href="style.scss">
    </head>
    <body>
        <!--Video 1-->
        <section id="wrapper">
            <div class="videoContainer">
                <video id="myVideo" controls preload="auto" poster="http://s.cdpn.io/6035/vp_poster.jpg" width="380" >
                    <source src="http://html-testing.github.io/2/videos/mikethefrog.mp4" type="video/mp4" />
                    <p>Your browser does not support the video tag.</p>
                </video>
                <div class="caption">Video1</div>
                <div class="control">
                    <div class="btmControl">
                        <div class="btnPlay btn" title="Play/Pause video"><span class="icon-play"></span></div>
                        <div class="progress-bar">
                            <div class="progress">
                                <span class="bufferBar"></span>
                                <span class="timeBar"></span>
                            </div>
                        </div>
                        <!--<div class="volume" title="Set volume">
                        <span class="volumeBar"></span>
                        </div>-->
                        <div class="sound sound2 btn" title="Mute/Unmute sound"><span class="icon-sound"></span></div>
                        <div class="btnFS btn" title="Switch to full screen"><span class="icon-fullscreen"></span></div>
                    </div>
                </div>
            </div>
        </section>

        <!--Video 2-->
        <section id="wrapper">
            <div class="videoContainer">

                <video id="myVideo" controls preload="auto" poster="http://s.cdpn.io/6035/vp_poster.jpg" width="380" >
                    <source src="http://html-testing.github.io/2/videos/mikethefrog.mp4" type="video/mp4" />
                    <p>Your browser does not support the video tag.</p>
                </video>
                <div class="caption">Video2</div>
                <div class="control">
                    <div class="btmControl">
                        <div class="btnPlay btn" title="Play/Pause video"><span class="icon-play"></span></div>
                        <div class="progress-bar">
                            <div class="progress">
                                <span class="bufferBar"></span>
                                <span class="timeBar"></span>
                            </div>
                        </div>
                        <!--<div class="volume" title="Set volume">
                        <span class="volumeBar"></span>
                        </div>-->
                        <div class="sound sound2 btn" title="Mute/Unmute sound"><span class="icon-sound"></span></div>
                        <div class="btnFS btn" title="Switch to full screen"><span class="icon-fullscreen"></span></div>
                    </div>

                </div>
            </div>
        </section>
    </body>
</html>

CSS

@import url(http://fonts.googleapis.com/css?family=Oswald:300);
* {
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
  background: #1f323e;
  background: radial-gradient(ellipse cover at 80% 0%, #426168 0%, rgba(49, 67, 74, 0.1) 100%), radial-gradient(ellipse cover at 20% 100%, #080d11 0%, #243a43 100%);
}

body {
  font-family: 'Oswald', sans-serif;
}

video {
  border-radius: 6px;
}

/* video container */
.videoContainer {
  width: 380px;
  height: 200px;
  position: relative;
  overflow: hidden;
  background: #000;
  color: #ccc;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  margin: 50px auto 0;
}

.videoContainer:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3);
  z-index: 6;
  border-radius: 6px;
  pointer-events: none;
}

/* video caption css */
.caption {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 5px 10px;
  color: #ddd;
  font-size: 14px;
  font-weight: 300;
  text-align: center;
  background: rgba(0, 0, 0, 0.4);
  text-transform: uppercase;
  border-radius: 6px 6px 0 0;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
}

/*** VIDEO CONTROLS CSS ***/
/* control holder */
.control {
  color: #ccc;
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 360px;
  z-index: 5;
  display: none;
}

/* control bottom part */
.btmControl {
  clear: both;
}

.control .btnPlay {
  float: left;
  width: 34px;
  height: 30px;
  padding: 5px;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  border-radius: 6px 0 0 6px;
  border: 1px solid rgba(0, 0, 0, 0.7);
  box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5);
}

.control .icon-play {
  background: url(http://s.cdpn.io/6035/vp_sprite.png) no-repeat -11px 0;
  width: 6px;
  height: 9px;
  display: block;
  margin: 4px 0 0 8px;
}

.control .icon-pause {
  background: url(http://s.cdpn.io/6035/vp_sprite.png) no-repeat -34px -1px;
  width: 8px;
  height: 9px;
  display: block;
  margin: 4px 0 0 8px;
}

.control .selected {
  font-size: 15px;
  color: #ccc;
}

.control .sound {
  width: 30px;
  height: 30px;
  float: left;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-left: none;
  box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.control .icon-sound {
  background: url(http://s.cdpn.io/6035/vp_sprite.png) no-repeat -19px 0;
  width: 13px;
  height: 10px;
  display: block;
  margin: 8px 0 0 8px;
}

.control .muted .icon-sound {
  width: 7px !important;
}

.control .btnFS {
  width: 30px;
  height: 30px;
  border-radius: 0 6px 6px 0;
  float: left;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-left: none;
  box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5);
}

.control .icon-fullscreen {
  background: url(http://s.cdpn.io/6035/vp_sprite.png) no-repeat 0 0;
  width: 10px;
  height: 10px;
  display: block;
  margin: 8px 0 0 9px;
}

/* PROGRESS BAR CSS */
/* Progress bar */
.progress-bar {
  height: 30px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-left: none;
  box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5);
  float: left;
}

.progress {
  width: 240px;
  height: 7px;
  position: relative;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.4);
  /* fallback */
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 1px 1px black;
  border-radius: 10px;
}

.progress span {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-radius: 10px;
}

.timeBar {
  z-index: 10;
  width: 0;
  background: -webkit-linear-gradient(top, #6bcce2 0%, #1da3d0 100%);
  box-shadow: 0 0 7px rgba(107, 204, 226, 0.5);
}

.bufferBar {
  z-index: 5;
  width: 0;
  background: rgba(255, 255, 255, 0.2);
}

/* VOLUME BAR CSS */
/* volume bar */
.volume {
  position: relative;
  cursor: pointer;
  width: 70px;
  height: 10px;
  float: right;
  margin-top: 10px;
  margin-right: 10px;
}

.volumeBar {
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #eee;
  z-index: 10;
}

JavaScript

/*
JS Modified from a tutorial found here: 
http://www.inwebson.com/html5/custom-html5...ls-with-jquery/
I really wanted to learn how to skin html5 video.
*/
$(document).ready(function(){
    //INITIALIZE
    var video = $('#myVideo');

    //remove default control when JS loaded
    video[0].removeAttribute("controls");
    $('.control').fadeIn(500);
    $('.caption').fadeIn(500);

    //before everything get started
    video.on('loadedmetadata', function() {

        //set video properties
        $('.current').text(timeFormat(0));
        $('.duration').text(timeFormat(video[0].duration));
        updateVolume(0, 0.7);

        //start to get video buffering data 
        setTimeout(startBuffer, 150);

        //bind video events
        $('.videoContainer')
        .hover(function() {
            $('.control').stop().fadeIn();
            $('.caption').stop().fadeIn();
        }, function() {
            if(!volumeDrag && !timeDrag){
                $('.control').stop().fadeOut();
                $('.caption').stop().fadeOut();
            }
        })
        .on('click', function() {
            $('.btnPlay').find('.icon-play').addClass('icon-pause').removeClass('icon-play');
            $(this).unbind('click');
            video[0].play();
        });
    });

    //display video buffering bar
    var startBuffer = function() {
        var currentBuffer = video[0].buffered.end(0);
        var maxduration = video[0].duration;
        var perc = 100 * currentBuffer / maxduration;
        $('.bufferBar').css('width',perc+'%');

        if(currentBuffer < maxduration) {
            setTimeout(startBuffer, 500);
        }
    };  

    //display current video play time
    video.on('timeupdate', function() {
        var currentPos = video[0].currentTime;
        var maxduration = video[0].duration;
        var perc = 100 * currentPos / maxduration;
        $('.timeBar').css('width',perc+'%');    
        $('.current').text(timeFormat(currentPos)); 
    });

    //CONTROLS EVENTS
    //video screen and play button clicked
    video.on('click', function() { playpause(); } );
    $('.btnPlay').on('click', function() { playpause(); } );
    var playpause = function() {
        if(video[0].paused || video[0].ended) {
            $('.btnPlay').addClass('paused');
            $('.btnPlay').find('.icon-play').addClass('icon-pause').removeClass('icon-play');
            video[0].play();
        } else {
            $('.btnPlay').removeClass('paused');
            $('.btnPlay').find('.icon-pause').removeClass('icon-pause').addClass('icon-play');
            video[0].pause();
        }
    };


    //fullscreen button clicked
    $('.btnFS').on('click', function() {
        if($.isFunction(video[0].webkitEnterFullscreen)) {
            video[0].webkitEnterFullscreen();
        }   
        else if ($.isFunction(video[0].mozRequestFullScreen)) {
            video[0].mozRequestFullScreen();
        } else {
            alert('Your browsers doesn\'t support fullscreen');
        }
    });

    //sound button clicked
    $('.sound').click(function() {
        video[0].muted = !video[0].muted;
        $(this).toggleClass('muted');
        if(video[0].muted) {
            $('.volumeBar').css('width',0);
        } else {
            $('.volumeBar').css('width', video[0].volume*100+'%');
        }
    });

    //VIDEO EVENTS
    //video canplay event
    video.on('canplay', function() {
        $('.loading').fadeOut(100);
    });

    //video canplaythrough event
    //solve Chrome cache issue
    var completeloaded = false;
    video.on('canplaythrough', function() {
        completeloaded = true;
    });

    //video ended event
    video.on('ended', function() {
        $('.btnPlay').removeClass('paused');
        video[0].pause();
    });

    //video seeking event
    video.on('seeking', function() {
        //if video fully loaded, ignore loading screen
        if(!completeloaded) { 
            $('.loading').fadeIn(200);
        }   
    });

    //video seeked event
    video.on('seeked', function() { });

    //video waiting for more data event
    video.on('waiting', function() {
        $('.loading').fadeIn(200);
    });

    //VIDEO PROGRESS BAR
    //when video timebar clicked
    var timeDrag = false;   /* check for drag event */
    $('.progress').on('mousedown', function(e) {
        timeDrag = true;
        updatebar(e.pageX);
    });
    $(document).on('mouseup', function(e) {
        if(timeDrag) {
            timeDrag = false;
            updatebar(e.pageX);
        }
    });
    $(document).on('mousemove', function(e) {
        if(timeDrag) {
            updatebar(e.pageX);
        }
    });
    var updatebar = function(x) {
        var progress = $('.progress');

        //calculate drag position
        //and update video currenttime
        //as well as progress bar
        var maxduration = video[0].duration;
        var position = x - progress.offset().left;
        var percentage = 100 * position / progress.width();
        if(percentage > 100) {
            percentage = 100;
        }
        if(percentage < 0) {
            percentage = 0;
        }
        $('.timeBar').css('width',percentage+'%');  
        video[0].currentTime = maxduration * percentage / 100;
    };

    //VOLUME BAR
    //volume bar event
    var volumeDrag = false;
    $('.volume').on('mousedown', function(e) {
        volumeDrag = true;
        video[0].muted = false;
        $('.sound').removeClass('muted');
        updateVolume(e.pageX);
    });
    $(document).on('mouseup', function(e) {
        if(volumeDrag) {
            volumeDrag = false;
            updateVolume(e.pageX);
        }
    });
    $(document).on('mousemove', function(e) {
        if(volumeDrag) {
            updateVolume(e.pageX);
        }
    });
    var updateVolume = function(x, vol) {
        var volume = $('.volume');
        var percentage;
        //if only volume have specificed
        //then direct update volume
        if(vol) {
            percentage = vol * 100;
        } else {
            var position = x - volume.offset().left;
            percentage = 100 * position / volume.width();
        }

        if(percentage > 100) {
            percentage = 100;
        }
        if(percentage < 0) {
            percentage = 0;
        }

        //update volume bar and video volume
        $('.volumeBar').css('width',percentage+'%');    
        video[0].volume = percentage / 100;

        //change sound icon based on volume
        if(video[0].volume === 0){
            $('.sound').removeClass('sound2').addClass('muted');
        }
        else if(video[0].volume > 0.5){
            $('.sound').removeClass('muted').addClass('sound2');
        } else {
            $('.sound').removeClass('muted').removeClass('sound2');
        }

    };

    //Time format converter - 00:00
    var timeFormat = function(seconds){
        var m = Math.floor(seconds/60)<10 ? "0"+Math.floor(seconds/60) : Math.floor(seconds/60);
        var s = Math.floor(seconds-(m*60))<10 ? "0"+Math.floor(seconds-(m*60)) : Math.floor(seconds-(m*60));
        return m+":"+s;
    };
});

Click Here用于 JS Fiddle。

最佳答案

一个页面上不能有多个 ID。将视频 ID 更改为类。这可能就是您没有得到想要的结果的原因。

在那之后，点击你可以做:

$('.myVideo').each(function(){
    this.play();
});

或

$('video').each(function(){
    this.play();
});

编辑

所以在重新阅读问题后，我终于明白你需要做什么。您的事件选择器和一切应该仍然是好的。

1- 变化:

var video = $('#myVideo');
to
var video = $('.myVideo');

2- 将 $(this).parents(.videoContainer) 变量传递给您的 playpause() 函数。这将使您能够访问被点击的视频容器。

您还可以将事件函数调用合并到一行:

$(document).on('click', 'video, .btnPlay', function(){
    playPause($(this).parents('.videoContainer'));
});

var playPause = function($that){
    var $playBtn = $that.find('.btnPlay');
    var video = $that.find('video').get(0);

    //video.pause() and video.play() is what you will you use to play/pause
    //put your conditional statements and stuff here
}

关于javascript - 嵌入视频播放器播放按钮一次播放所有视频播放器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36536333/

上一篇：html - 一行上的两个正文

下一篇：html - 使用 flexbox 和 overflow hidden & scroll 在 Firefox 中不起作用？

相关文章：

javascript - 如何根据 Google Maps API 中现有的折线坐标绘制新的折线？

python - 在 selenium webdriver python 中选择页面文本

html - 如何在 flex 中强制连续放置最大数量的框？

jquery - 使用 jquery 放大/缩小文本以动态填充 div？

css - z-index 不受尊重

javascript - 使用生成的 div 拖放 Vanilla JS

javascript - Facebook Like 按钮插件未显示在我的浏览器中

javascript - IE 8 中的 JS 错误... "Object Required"

javascript - 自动将 float div 的宽度固定为图像大小

css - 是否有 CSS 父级选择器？

©2024 IT工具网  联系我们