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. Mysql update语句赋值嵌套与在表列中数据后面增加数据

    1.Mysql update语句赋值嵌套select  点击(此处)折叠或打开 update a set col=(select col from a where id='5') where id&g ...

  2. hashmap如何初始化

    现在知道的有两种: 1) Map<String, String> hashMap = new HashMap<String, String>(){            {   ...

  3. Ubuntu安装MongoDB和PHP扩展

    MongoDB是一个可伸缩的,高性能的开源NoSQL 文档数据库.主要用C++开发完成.面向文档存储,全索引支持,可复制和高可用性,自动分片等特征.其在非关系型数据库中是功能最丰富,最像关系型数据库 ...

  4. (简单) POJ 2253 Frogger,Dijkstra。

    Description Freddy Frog is sitting on a stone in the middle of a lake. Suddenly he notices Fiona Fro ...

  5. IOS FMDB模糊查询

    http://blog.sina.com.cn/s/blog_9630f1310101fx1d.html /查询记录 -(NSArray*)selectitemDream_desc:(JiemengS ...

  6. 手动调用NDK编译HelloWorld

    首先,你得有NDK(木有的自行搜索) /home/xxxx/tools/android-ndk-r12b 准备好你的HelloWorld程序源码: #include<stdio.h> in ...

  7. Dom编程(二)

    document是window对象的一个属性,因为使用window对象成员的时候可以省略window.,所以一般直接写document  document的方法: (1)write:向文档中写入内容. ...

  8. android 通过wifi 热点实现手机摄像头数据共享(转)

    原文地址:http://blog.csdn.net/sinat_35845281/article/details/52674946 最近想搞一个新奇的玩意儿~~~ 最近一直在在学习通过两个Androi ...

  9. Django performance

    Reference: https://impythonist.wordpress.com/2016/02/21/building-high-performance-django-systems/ Th ...

  10. Oracle数据库中的函数

    1.随机数函数:DBMS_RANDOM.RANDOM )) FROM DUAL; --产生一个100以内的随机数 *dbms_random.value) FROM dual; --产生一个100-10 ...