滚动播放HTML5视频 [英] Play Html5 video on scroll

问题描述

我正在一个Wordpress网站上工作，下面是我想要的代码(仅播放一次，最后显示重播"按钮).

I am working on a Wordpress site and I have the code below which is working how I want it (only playing once, with the "replay" button appearing at the end)

当它滚动到ie时，我希望它开始播放.在视口中.

I would like it to start playing when it is scrolled to ie. in the viewport.

我在这里看到了几种实现此目的的方法，但是我不能让它们与我当前的代码配合使用.

I have seen a few different ways of making this happen on here, but I can't get them to play nice with my current code.

HTML

<div class="spacer">

  </div>
  <div class="video-wrapper">
    <video id="bVideo" muted autoplay>
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
    </video>
    <div id="playButton" class="playButton" onclick="playPause()"></div>
    <div class="replayButton" id="replayButton" onclick="playPause()">REPLAY ↻</div>
  </div>
<script>


var bunnyVideo = document.getElementById("bVideo");
var el = document.getElementById("playButton");
var replay = document.getElementById("replayButton");
replay.style.visibility = "hidden";

function playPause() {
  if (bunnyVideo.paused) 
  {
    bunnyVideo.play();
      replay.className = "replayButton";
  replay.style.visibility = "hidden";
  } 
  else 
  {
    bunnyVideo.pause();
    el.className = "playButton";
    replay.className = "";
  }
}

function playPauseControls() {
  if (!bunnyVideo.paused) {
    el.className ="";
    replay.className = "";
  } else {
     el.className = "playButton";
     replay.className = "";
  }
}

function videoEnd() {
  replay.className = "replayButton";
  replay.style.visibility = "visible";
  el.className = "";
  }




function showControls(){
  bunnyVideo.setAttribute("controls","controls");
}
function hideControls(){
  bunnyVideo.removeAttribute("controls","controls");
}

/*Google Analytics Tracker Function*/
/*Assuming you've already set up the Google Analytics script function on your webpage. This just activates a trigger event when the video plays.*/
/*function bunnyVideoView() {
     ga('send', 'event', { 
          'eventCategory': 'Bunny Video',
          'eventAction': 'play',
          'eventLabel': 'Bunny Video View'
     });
}*/


bunnyVideo.addEventListener("play", playPauseControls, false);
bunnyVideo.addEventListener("pause", playPauseControls, false);
bunnyVideo.addEventListener("mouseout", hideControls, false);
bunnyVideo.addEventListener("ended", videoEnd, false);
/*Google Analytics Tracker*/
/*bunnyVideo.addEventListener("play", bunnyVideoView, false);*/

</script>

CSS

.spacer {
  height: 400px;
}

.video-wrapper {
  position: relative;
  max-width: 680px;
}

.video-wrapper > video {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    vertical-align: middle;
    cursor: pointer;
}

/* Hide iOS Play Button */
video::-webkit-media-controls-start-playback-button {
    display: none!important;
    -webkit-appearance: none;
}


.playButton {
  border-radius: 100px;
  border: 8px solid #fff !important;
  height: 100px;
  position: absolute;
  width: 100px;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  cursor: pointer;
  display: block;
  opacity: 0.95;
  transition: opacity 400ms;
}

.playButton:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 0 25px 50px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 0;
  left: 0;
  right: -10px;
  bottom: 0;
  margin: auto;
}

.replayButton {
    color: black;
  position: relative;
    text-align: center;
  margin: auto;
    margin-top: 0px;
  cursor: pointer;
  display: block;
  opacity: 0.95;
  transition: opacity 150ms;
}

.replayButton:hover, .replayButton:focus {
  color: #ea7200;
}

.replayButton:before {
  height: 45px;
  width: 45px;
  position: absolute;
  top: 18px;
  left: 18px;
  content: '';
  display: block;
  border-color: transparent white white white;
  border-radius: 50%;
  border-style: solid;
  border-width: 8px;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.replayButton:after {
  border-color: transparent transparent transparent white;
  border-style: solid;
  border-width: 0 45px 22px 22px;
  height: 0;
  position: absolute;
  top: 40px;
  left: 15px;
  bottom: 0;
  right: 0;
  width: 0;
  content: "";
  display: block;
  margin: auto;
}

https://jsfiddle.net/ag3sowbg/

推荐答案

我前段时间不得不解决类似的任务.

I had to solve a similar task some time ago.

首先，您添加一个绝对位于视频包装器死点中心的空元素.

First, you add an empty element absolutely positioned in the dead center of the video wrapper.

接下来，您将视口的皮带"定义为视频触发器的跟踪区域.

Next, you define the "belt" of your viewport as a tracking zone for the video trigger.

在 window.scroll 上，您只需检测碰撞触发器是否进入或离开触发器区域，然后播放或暂停视频即可.

On window.scroll you simply detect if a collision trigger enters or leaves the trigger area and either play or pause the video.

我希望这会有所帮助: CodePen链接

I hope this helps: CodePen link

PS:在添加自定义播放/重放按钮时，我可能会非常小心，因为不同浏览器中的许多媒体播放器都使用自己的(Safari，Firefox)，并且您最终很可能会拥有彼此重叠(请注意，浏览器的默认设置总会获胜).去过那里:)如果不是必需的，请将它们放下...

PS: I would probably be very careful with adding custom play/replay buttons as lots of media players in different browsers use their own (Safari, Firefox) and you'll most likely end up having two over each other (the browser default always wins, mind you). Been there :) Drop them if they aren't essential...

这篇关于滚动播放HTML5视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！