通過視頻疊加播放按鈕

我目前有一個腳本可以播放和暫停視頻onclick。我想要做的是在開始和停止時在視頻上疊加一個播放按鈕，並且當視頻再次播放時，該按鈕將消失。通過視頻疊加播放按鈕

任何建議，將不勝感激。

HTML

<video class="video"><source src="http://e14aaeb709f7cde1ae68-a1d0a134a31b545b257b15f8a8ba5726.r70.cf3.rackcdn.com/projects/31432/1427815464209-bf74131a7528d0ea5ce8c0710f530bb5/1280x720.mp4" type="video/mp4"> 
</video>

CSS

.video { 
width: 50%; 
border: 1px solid black; 
}

// Plays and pauses video on click 

$('.video').click(function(){this.paused?this.play():this.pause();});

來源

2015-05-18 Sam Pittman

我想我只需要解釋。

時.video點擊和視頻暫停 - >
.video{visibility: hidden;}
當點擊.video和視頻運行 - >
.video{visibility: visible;}

如果你想要更多的代碼，請評論

來源

2015-05-18 17:51:16

如果你想有一個可以編輯的內容的實際覆蓋，也許這將適合你： https://jsfiddle.net/svArtist/9ewogtwL/

$('.video').parent().click(function() { 
 
    if($(this).children(".video").get(0).paused){ 
 
     $(this).children(".video").get(0).play(); 
 
     $(this).children(".playpause").fadeOut(); 
 
    }else{ 
 
     $(this).children(".video").get(0).pause(); 
 
     $(this).children(".playpause").fadeIn(); 
 
    } 
 
});

.video { 
 
    width: 100%; 
 
    border: 1px solid black; 
 
} 
 
.wrapper{ 
 
    display:table; 
 
    width:auto; 
 
    position:relative; 
 
    width:50%; 
 
} 
 
.playpause { 
 
    background-image:url(http://png-4.findicons.com/files/icons/2315/default_icon/256/media_play_pause_resume.png); 
 
    background-repeat:no-repeat; 
 
    width:50%; 
 
    height:50%; 
 
    position:absolute; 
 
    left:0%; 
 
    right:0%; 
 
    top:0%; 
 
    bottom:0%; 
 
    margin:auto; 
 
    background-size:contain; 
 
    background-position: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <video class="video"> 
 
     <source src="http://e14aaeb709f7cde1ae68-a1d0a134a31b545b257b15f8a8ba5726.r70.cf3.rackcdn.com/projects/31432/1427815464209-bf74131a7528d0ea5ce8c0710f530bb5/1280x720.mp4" type="video/mp4" /> 
 
    </video> 
 
    <div class="playpause"></div> 
 
</div>

來源

2015-05-18 18:04:23

這在桌面上運行得非常好，但iPhone上的HTML5播放器已經覆蓋了播放按鈕，而且這個手動創建的播放器覆蓋了它並將其呈現爲非活動狀態。 – Tilo

在點擊觸發將工作也沒關係......它會降低jQuery代碼。 .toggle()

來源

2016-09-26 14:10:06

通過視頻疊加播放按鈕

回答

相關問題