javascript - 使用原始 JavaScript 在模态中显示视频

Question

我对此很陌生，我尝试做的是禁用背景(我设法做到了)，然后显示其中包含视频的模式。

这里是jsfiddle:https://jsfiddle.net/uqu070wz/

js 片段:

//function to do the fade in effect
function fadeIn(el) {   
    el.style.opacity = 0;
    var tick = function() {
        el.style.opacity = +el.style.opacity + 0.05;
        console.log(el);
        if (+el.style.opacity <= 0.8) {
            (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 10)
        }
    };
    tick();
}   

function show_modal(){
    document.getElementById('modal-video').style.display = 'block';
}

//plays the video in cinema-view
function play_video(vid){
    var vid = vid;
    //disable background
    var el = document.getElementById("bck");
    document.getElementsByTagName('body')[0].style.overflow = 'hidden';
    fadeIn(el);
    el.style.display = 'block';

    //show video modal
    var el = document.getElementById("modal-video");
    fadeIn(el);
    el.style.opacity ='1';
    setTimeout(show_modal, 800);
    var video = document.getElementById("video1");
    video.src = vid;
}

html 片段:

<!-- for the fading effect -->
<div id="bck" class="overlay"></div> 
<div id="modal-video" class="overlay-modal"> 
  <h3>Titulo</h3>
  <video id="video" class="vid" width="100%" autoplay>
      <source id="video1" src="" type="video/mp4">
      <!-- <source src="mov_bbb.ogg" type="video/ogg"> -->
      Your browser does not support HTML5 video.
  </video>
</div>

CSS 片段:

.overlay{
    z-index: 4;
    position: absolute;
    display:none; 
    background-color: #000000;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 100%;
}

.overlay-modal {
    z-index: 5;
    display: none;
    background: #fff;
    padding: 1%;
    width: 40%;
    position: absolute;
    top: 15%;
    left: 50%;
    margin: 0 0 0 -20%; /* add negative left margin for half the width to center the div */
    cursor: default;
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(0,0,0,0.9);
}

.vid {
    z-index: 6;
}

有什么帮助吗？谢谢!还有一件事......不，我不想使用 fancybox 或任何其他脚本......我想自己学习。而且我也不想使用 JQuery...:)

Answer 1

要播放视频，您需要使用 <video>元素设置 src并调用play() 。如果autoplay启用后您无需调用play() 。您选择的是<source>设置视频的元素 src 。看到这里DEMO

HTML

<!-- for the fading effect -->
<div id="bck" class="overlay"></div> 
<div id="modal-video" class="overlay-modal"> 
  <h3>Titulo</h3>
  <video id="video_element" class="vid" width="100%" autoplay>
    <source id="video1" src="" type="video/mp4">
    <!-- <source src="mov_bbb.ogg" type="video/ogg"> -->
    Your browser does not support HTML5 video.
  </video>
</div>

JS

//function to do the fade in effect
function fadeIn(el) {   
  el.style.opacity = 0;
  el.style.display = "block";
  var tick = function() {
    el.style.opacity = +el.style.opacity + 0.05;
    if (+el.style.opacity <= 0.8) {
        (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 10)
    }
  };
  tick();
}   

function show_modal(){
   document.getElementById('modal-video').style.display = 'block';
}

//plays the video in cinema-view
function play_video(vid){
   var vid = vid;
   //disable background
   var el = document.getElementById("bck");
   document.getElementsByTagName('body')[0].style.overflow = 'hidden';
   fadeIn(el);
   el.style.display = 'block';

   //show video modal
   var el = document.getElementById("modal-video");
   fadeIn(el);
   el.style.opacity ='1';
   setTimeout(show_modal, 800);
   //To set the source you need to select the video element
   var video = document.getElementById("video_element");
   video.src = vid;       
}

var overlay = document.getElementById('bck');
fadeIn(overlay);
play_video("http://media.w3.org/2010/05/sintel/trailer.mp4");