首頁  >  文章  >  web前端  >  分享一款html5影片背景插件

分享一款html5影片背景插件

王林
王林轉載
2021-02-24 09:52:002594瀏覽

分享一款html5影片背景插件

今天為大家分享一款非常不錯的插件vidibacking,可能很多同學還不知道這款插件,下面我就來為大家簡單介紹下這款插件。

vidibacking插件是一款響應式的、跨平台的html 5視訊背景插件,這個插件可以讓我們在頁面中的,某個div後整個頁面中使用html5視訊作為背景。

使用方法:

使用簡單,對於在dc6dce4a544fdca2df29d5ac0ea9906b元素內製作影片背景效果,你只需要將video標籤放在dc6dce4a544fdca2df29d5ac0ea9906b元素內。

    <div id="video-back"> 
      <video poster="screenshot1.jpg" autoplay muted loop class="vidbacking"> 
        <source src="video1.mp4" type="video/mp4"> 
        <source src="video1.webm" type="video/webm"> 
      </video> 
        <!-- html content of the div --> 
        <h1>Vidbacking Demo of <div> Background</h1> 
    </div>

下載網址 http://www.52player.cn/VideoPlayer/2018/0123488.html
示範網址 ##http://www.52player.cn/ Demos/html5videobackgroud/

相關推薦:html5教學

以上是分享一款html5影片背景插件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:csdn.net。如有侵權,請聯絡admin@php.cn刪除