【js编程艺术】小制作六
2024-08-31 09:05:34
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 = "►"; 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();
}
最后出来是这样子的:
和书上的有点不一样,先不管了。这是视频:
看不了肿么办…………………………………………我传到腾讯视频了:传送门。
最新文章
- Mustache.js前端模板引擎源码解读
- jsp+oracle实现数据库内容以表格形式在前台显示(包含分页)
- POJ3267——The Cow Lexicon(动态规划)
- RPC之——HTTP协议栈
- Mysql 8个小时连接断开问题解析
- js各种验证文本框输入格式
- 关于js的一些关键知识点(call,apply,callee, caller,clourse,prototypeChain)
- 前端控件之Jquery datetimepicker的使用总结
- java基金会成立Set
- 由浅入深理解----java反射技术
- 对matplotlib库的运用
- 在mmdetection中跑通MaskRCNN
- C# web发布设置
- 关于#!/bin/bash和#!/bin/sh
- jquery实现文本框click清空文本内容
- 《HTTP - 概述》
- C#Winform窗体实现服务端和客户端通信例子(TCP/IP)
- 2015年蓝桥杯省赛B组第3题--三羊献瑞
- Deepin15.8系统下安装QorIQ Linux SDK v2.0 yocto成功完美运行的随笔
- php 文件上传缩略图路径分析类
热门文章
- Java从键盘输入
- PAT (Advanced Level) 1005. Spell It Right (20)
- iReport使用教程
- php 中的魔术方法-----“事件方法”
- ASP.NET Security
- Xcode7 新添旧版模拟器方法
- pom文件说明
- 23、手把手教你Extjs5(二十三)模块Form的自定义的设计[2]
- 13、手把手教你Extjs5(十三)模块字段和Grid列的定义[1]
- html中的图片、css、js等路径加载问题