顯示視頻模式與原始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");