video全页面 demo

效果

思路

1.页面由video和div构成

<video id="bgvid" autoplay muted loop>    <source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">    <source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4"></video><div id="polina">    <h1>DEMO</h1>    <p>使用HTML5，CSS3和JavaScript    <p><a href="javascript:void(0)"> 挺不错的</a></p>    <p>我觉得前端开发</p>    <p>是站在艺术和科技的十字路口</p>    <button>暂停</button></div>

2.将video设为全页面显示

   video {            position: fixed;            top: 50%;            left: 50%;            min-width: 100%;            min-height: 100%;            width: auto;            height: auto;            z-index: -100;            transform: translateX(-50%) translateY(-50%);            background-size: cover;            transition: 1s opacity;        }

3.为div添加样式

 #polina {            font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;            font-weight: 100;            background: rgba(0, 0, 0, 0.3);            color: white;            padding: 2rem;            width: 33%;            margin: 2rem;            float: right;            font-size: 1.2rem;        }

4.JavaScript控制视频暂停或者播放

 var vid = document.getElementById("bgvid");    var pauseButton = document.querySelector("#polina button");    pauseButton.addEventListener("click", function () {        vid.classList.toggle("stopfade");        if (vid.paused) {            vid.play();            pauseButton.innerHTML = "暂停";        } else {            vid.pause();            pauseButton.innerHTML = "开始";        }    })

源码

https://github.com/iamcgt/Front-end-development.git

参考

http://codepen.io/dudleystorey/pen/knqyK