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