1.html

/* movie.html*/
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>My Video</title>

    <link rel="stylesheet" type="text/css" href="styles/player.css">

</head>

<body>

    <div class="video-wrapper">

        <video id="movie" controls>

            <source src="movie.mp4" />

            <source src="movie.webm" type="video/webm; codecs='vp8, vorbis'" />

            <source src="movie.ogv" type="video/ogg; codecs='theora, vorbis'" />

            <p>

                Dowmload movie as

                <a href="movie.mp4">MP4</a>,

                <a href="movie.webm">WebM</a>,

                or <a href="movie.ogv">Ogg</a>.

            </p>

        </video>

    </div>

    <script type="text/javascript" src="scripts/player.js"></script>

</body>

</html>

2.css

/* palyer.css*/
.video-wrapper{

    overflow: hidden;

}

.video-wrapper .controls{

    position: absolute;

    height: 30px;

    width: 30px;

    margin: auto;

    background: rgba(0, 0, 0, 0.5);

}

.video-wrapper button{

    display: block;

    width: 100%;

    height:  100%;

    border:;

    cursor: pointer;

    font-size: 17px;

    color: #fff;

    background: transparent;

}

.video-wrapper button[paused]{

    font-size: 12px;

}

3.js

/* player.js*/
function createVideoControls(){

    var vids = document.getElementsByTagName("video");

    for(var i = 0; i < vids.length; i++){

        addControls(vids[i]);

    }

}

function addControls(vid){

    vid.removeAttribute("controls");

    vid.height = vid.videoHeight;

    vid.width = vid.videoWidth;

    vid.parentNode.style.height = vid.videoHeight + "px";

    vid.parentNode.style.width = vid.videoWidth + "px";

    var controls = document.createElement("div");

    controls.setAttribute("class", "controls");

    var play = document.createElement("button");

    play.setAttribute("title", "Play");

    play.innerHTML = "&#x25BA";

    controls.appendChild(play);

    vid.parentNode.insertBefore(controls, vid);

    play.onclick = function(){

        if(vid.ended){

            vid.currrentTime = 0;

        }

        if(vid.paused){

            vid.play();

        }else{

            vid.pause();

        }

    };

    vid.addEventListener("play", function(){

        play.innerHTML = "▐▐";

        play.setAttribute("paused", true);

    }, false);

    vid.addEventListener("pause", function(){

        play.removeAttribute("pause");

        play.innerHTML = "►";

    }, false);

    vid.addEventListener("ended", function(){

        vid.pause();

    }, false);

}

window.onload = function(){

    createVideoControls();

}

最后出来是这样子的：

和书上的有点不一样，先不管了。这是视频：

看不了肿么办…………………………………………我传到腾讯视频了：传送门。

【js编程艺术】小制作六的更多相关文章

  1. 【js 编程艺术】小制作一

    最近在看js编程艺术,照葫芦画瓢,做了一个小网页.作为一枚前端渣渣,遇到了好多坑,在这里就不提了. 首先是html代码 /*gallery.html*/<!DOCTYPE html> &l ...

  2. 编程艺术第十六~第二十章：全排列/跳台阶/奇偶调序，及一致性Hash算法

    目录(?)[+]   第十六~第二十章:全排列,跳台阶,奇偶排序,第一个只出现一次等问题 作者:July.2011.10.16.出处:http://blog.csdn.net/v_JULY_v. 引言 ...

  3. 【js编程艺术】小制作五

    1.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  4. 【js 编程艺术】小制作四

    1. html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...

  5. 【js 编程艺术】小制作三

    1.html文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  6. 【js 编程艺术】小制作二

    首先是一个html文档 /* explanation.html */<!DOCTYPE html> <html> <head> <meta charset=& ...

  7. 2016.02.17 JS DOM编程艺术 第四五六章

    看完这三章内容,集中精力,加快速度.

  8. 【js编程艺术】 之有用的函数

    学习js的过程中有几个有用的函数. //添加事件函数 function addLoadEvent(func) { var oldonload = window.onload; if(typeof wi ...

  9. JS 编程艺术

    JS艺术片段剪贴 getFullDate: function (date) { //返回 YYYY年MM月DD日 var year = month = day = ' '; if (isNaN(dat ...

随机推荐

  1. 二叉堆（C#）

    参考:http://www.cnblogs.com/skywang12345/p/3610390.html using System; using System.Collections.Generic ...

  2. tooltip 鼠标移动上去出现图片或文字与title大同小异

    代码如下: <script type="text/javascript" src="jquery-1.3.2.min.js"></script ...

  3. Quick Cocos2dx CCLuaStack has no member names 'loadChunksZip'

    demo进行了这么久,已经很久没有连真机调试一下了,昨天下午我旁边的家伙连真机调试出了很多问题,于是我也连真机调一下吧. 运行一下project.android里面的 build_native.bat ...

  4. CodeForces 621C Wet Shark and Flowers

    方法可以转化一下,先计算每一个鲨鱼在自己范围内的数能被所给素数整除的个数有几个,从而得到能被整除的概率,设为f1,不能被整除的概率设为f2. 然后计算每相邻两只鲨鱼能获得钱的期望概率,f=w[id1] ...

  5. 关于在TabBar 中添加按钮,并通过block 或代理在控制器中实现响应

    相信很多朋友会遇到在TabBar中添加按钮,并要求点击按钮能够实现一些功能,但是当我们自定义的时候,怎么才能在控制器中响应?通常我会用代理或者block,block性能更好,建议使用. 自定义TabB ...

  6. java 单元测试 注入

    ApplicationContext appContext = new ClassPathXmlApplicationContext("appContext.xml"); MySQ ...

  7. C++异常(exception)第一篇--综合讲解

    摘要:catch(exception &ex)是捕获所有标准库定义中的类std:exception;catch(...)则是捕获所有的异常. 1.简介 异常是由语言提供的运行时刻错误处理的一种 ...

  8. R语言实战（四）回归

    本文对应<R语言实战>第8章:回归 回归是一个广义的概念,通指那些用一个或多个预测变量(也称自变量或解释变量)来预测响应变量(也称因变量.效标变量或结果变量)的方法.通常,回归分析可以用来 ...

  9. radiobutton设置样式

    单选题里会用到radiobutton,如果不想使用系统提供的圆圈样式,可以自定义样式,想要做成的效果就是, 使用自定义的图片替换圆圈,然后选择有4个选项的其中一个,图片上有个对勾标记, 然后如果正确选 ...

  10. firefox 28.0

    Ubuntu 安装 firefox 28.0指令: apt-cache show firefox | grep Version sudo apt-get install firefox=28.0+bu ...