<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第四个页面</title>
<style>
h1{
font-size: x-large;
margin: 6px 0px;
}
video{
border:double 8px lightgray;
}
.videoContainer{
max-width: 450px;
}
#postionBar{
height: 30px;
color:black;
font-weight: bold;
background: steelblue;
text-align: center;
}
#postionBar span{
display: inline-block;
width: 450px;
margin-bottom: 5px;
}
#durationBar{
border: solid 1px;
width: 450px;
margin-bottom: 5px;
}
</style>
<script type="text/javascript">
var video;
var display;
window.onload = function(){
video = document.getElementById("videoPlayer");
display = document.getElementById("displayStatus");
video.onplaying = function(){
display.innerHTML = "Playing......";
}
video.onpause = function(){
display.innerHTML = "Pausing......";
}
}
function progressUpdate(){
var postionBar = document.getElementById("postionBar");
postionBar.style.width = (video.currentTime/video.duration * 100) + "%";
display.innerHTML = Math.round((video.currentTime*100)/100) + "sec";
}
function play(){
video.play();
}
function pause(){
video.pause();
}
function stop(){
video.pause();
video.currentTime = 0;
}
function speedUp(){
video.play();
video.playbackRate = 2;
}
function slowDown(){
video.play();
video.playbackRate = 0.5;
}
function normalSpeed(){
video.play();
video.playbackRate = 1;
}
</script>
</head> <body>
<div class="videoContainer">
<video id="videoPlayer" ontimeupdate="progressUpdate()">
<source src="resource/梦想.mp4" type="audio/mp4"></source>
</video>
</div>
<div>
<div id="durationBar">
<div id="postionBar">
<span id="displayStatus"></span>
</div>
</div>
</div>
<button onclick="play()">Play</button>
<button onclick="pause()">Pause</button>
<button onclick="stop()">Stop</button>
<button onclick="speedUp()">Fast</button>
<button onclick="slowDown()">Slow</button>
<button onclick="normalSpeed()">Normal</button>
</body>
</html>
HTML5入门6---视频播放按钮的更多相关文章
-
HTML5入门以及新标签
HTML5 学习总结(一)--HTML5入门与新增标签 目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 ...
-
原生HTML5 input type=file按钮UI自定义
原生<input type="file" name="file" />长得太丑 提升一下颜值 实现方案一.设置input[type=file]透明度 ...
-
JQuery Mobile入门——设置后退按钮文字(转)
http://www.tuicool.com/articles/AZnYVz JQuery Mobile入门——设置后退按钮文字 时间 2013-01-09 20:24:28 CSDN博客原文 h ...
-
推荐10个适合初学者的 HTML5 入门教程
HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...
-
无废话ExtJs 入门教程六[按钮：Button]
无废话ExtJs 入门教程六[按钮:Button] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个两个按钮“提交”与重置.如下所示代码区的第68行位置, butt ...
-
Android 自定义View，仿微信视频播放按钮
闲着,尝试实现了新版微信视频播放按钮,使用的是自定义View,先来个简单的效果图...真的很简单哈. 由于暂时用不到,加上时间原因,加上实在是没意思,加上……,本控件就没有实现自定义属性,有兴趣的朋友 ...
-
HTML5的在线视频播放方案
移动端H5音频与视频问题及解决方案 看下最后实际效果:兼容PC,iphone, 安卓5.0 解决了,手动,自动,不全屏的问题 左边视频代替了动画,然后支持背景蒙板效果,能够透出底图 右边是原视频文件 ...
-
HTML5实现的视频播放器01
HTML5实现的视频播放器 什么是hivideo? 最近一段时间在使用PhoneGap开发一个App应用,App需要播放视频,本想直接使用html5的video,但使用它在全屏播放时不支持横屏播放 ...
-
分享一个基于HTML5实现的视频播放器
什么是hivideo? 最近一段时间在使用PhoneGap开发一个App应用,App需要播放视频,本想直接使用html5的video,但使用它在全屏播放时不支持横屏播放,只能放弃.最终决定还是自己封装 ...
随机推荐
-
css3- border
css3-border 1.border-color 2.border-image 3.border-radius ( none | <length>{1,4} [ / <leng ...
-
JavaScript高级程序设计(一)：JavaScript简介
一.JavaScript实现 1.一个完整的JavaScript包含三个部分组成: 1)ECMAScript 核心 2)DOM文档对象模型 3)BOM浏览器对象模型 2.文档对象模型(DOM) 文档对 ...
-
crawler_微信采集方案
仅供参考
-
what&#39;s the 二叉树
what's the 树 在了解二叉树之前,首先我们得有树的概念. 树是一种数据结构又可称为树状图,如文档的目录.HTML的文档树都是树结构,它是由n(n>=1)个有限节点组成一个具有层次关系的 ...
-
初识DOM（文档对象模型）
什么是DOM 什么叫做DOM呢? • DOM的全称是Document Object Model 文档对象模型,DOM定义了表示和修改文档所需的对象.这些对象的行为和属性以及这些对象之间的关系. • D ...
-
ActiveMQ持久化方式
ActiveMQ持久化方式 发表于8个月前(2014-09-04 15:55) 阅读(686) | 评论(0) 17人收藏此文章, 我要收藏 赞1 慕课网,程序员升职加薪神器,点击免费学习 摘要 ...
-
【Ubuntu】使用记录
Vim 设置自动折行 :set wrap Maven 安装 去官网下载maven安装包 解压maven, 在主目录下的.bashrc中添加 export PATH="$PATH:{your_ ...
-
Python 扩展知识：编程习惯
1. 使用四个空格作为缩进而不是Tab键2. 函数名定义时第二个单词首字母大写,如 getNum,类名定义时所有单词首字母大写,如 GetNum
-
MySQL5.7添加授权账号及修改默认端口
1.修改默认端口 打开配置文件 vim /etc/my.cnf 分别添加端口在client.mysql节点 [client] port=15099 [mysqld] port=15099 需要注意se ...
-
soundpool播放声音
一般大家使用的是MediaPlayer来播放音频,它的创建和销毁都是非常消耗资源的,如果我们的需求是播放一些短促而且频繁播放的音频的话MediaPlayer就有些不合适了,我们来讲讲SoundPool ...