<!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---视频播放按钮的更多相关文章

  1. HTML5入门以及新标签

    HTML5 学习总结(一)--HTML5入门与新增标签   目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 ...

  2. 原生HTML5 input type=file按钮UI自定义

    原生<input type="file" name="file" />长得太丑 提升一下颜值 实现方案一.设置input[type=file]透明度 ...

  3. JQuery Mobile入门——设置后退按钮文字(转)

    http://www.tuicool.com/articles/AZnYVz JQuery Mobile入门——设置后退按钮文字 时间 2013-01-09 20:24:28  CSDN博客原文  h ...

  4. 推荐10个适合初学者的 HTML5 入门教程

    HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...

  5. 无废话ExtJs 入门教程六[按钮：Button]

    无废话ExtJs 入门教程六[按钮:Button] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个两个按钮“提交”与重置.如下所示代码区的第68行位置, butt ...

  6. Android 自定义View，仿微信视频播放按钮

    闲着,尝试实现了新版微信视频播放按钮,使用的是自定义View,先来个简单的效果图...真的很简单哈. 由于暂时用不到,加上时间原因,加上实在是没意思,加上……,本控件就没有实现自定义属性,有兴趣的朋友 ...

  7. HTML5的在线视频播放方案

    移动端H5音频与视频问题及解决方案 看下最后实际效果:兼容PC,iphone, 安卓5.0 解决了,手动,自动,不全屏的问题 左边视频代替了动画,然后支持背景蒙板效果,能够透出底图 右边是原视频文件 ...

  8. HTML5实现的视频播放器01

    HTML5实现的视频播放器   什么是hivideo? 最近一段时间在使用PhoneGap开发一个App应用,App需要播放视频,本想直接使用html5的video,但使用它在全屏播放时不支持横屏播放 ...

  9. 分享一个基于HTML5实现的视频播放器

    什么是hivideo? 最近一段时间在使用PhoneGap开发一个App应用,App需要播放视频,本想直接使用html5的video,但使用它在全屏播放时不支持横屏播放,只能放弃.最终决定还是自己封装 ...

随机推荐

  1. Gulpfile.js——编译、压缩、合并js和css文件

    gulp 一个入门教程:http://www.ydcss.com/gulp API文档地址:http://www.gulpjs.com.cn/docs/api/ 我的一个Low版的gulpfile v ...

  2. Redis源码研究--跳表

    -------------6月29日-------------------- 简单看了下跳表这一数据结构,理解起来很真实,效率可以和红黑树相比.我就喜欢这样的. typedef struct zski ...

  3. php 文件上传一例简单代码

    1.程序文件 <?php //判断临时文件存放路径是否包含用户上传的文件 if(is_uploaded_file($_FILES["uploadfile"]["tm ...

  4. Python脚本控制的WebDriver 常用操作 <十四> 处理button dropdown 的定位

    测试用例场景 模拟选择下拉菜单中数据的操作 Python脚本 测试用HTML代码: <html> <body> <form> <select name=&qu ...

  5. c# HttpWebRequest与HttpWebResponse（转）

    如果你想做一些,抓取,或者是自动获取的功能,那么就跟我一起来学习一下Http请求吧.本文章会对Http请求时的Get和Post方式进行详细的说明,在请求时的参数怎么发送,怎么带Cookie,怎么设置证 ...

  6. Jquery LigerUI框架学习（一）

    ligerUI框架是一个很丰富的后台框架模板,具有简洁大方的后台样式框架,还有很多灵活的控件,方便开发人员使用: 把昨天学习的成功拿出来供大家学习学习: 首先我们要去ligerUI官网下载Jquery ...

  7. Redis 四：存储类型之无序集合

    .sadd num a b c 向num集合中添加abc三个元素 .srem num b 从num集合中删除b元素 .smembers num 获取num集合中所有的元素 .sismember num ...

  8. Python之回调魔法

    Python中魔法(前后又下划线)会在对象的生命周期被回调. 借助这种回调, 可以实现AOP或者拦截器的思想. 在Python语言中提供了类似于C++的运算符重在功能:一下为Python运算符重在调用 ...

  9. 史上最全的Excel数据编辑处理技巧（转）

    史上最全的数据编辑处理技巧,让你在日常数据分析处理的疯魔状态中解放出来. 一.隐藏行列 “不得了了,Excel出现灵异事件,部分区域消失不见了!”办公室里的一个MM跑过来大声喊叫着,着实吓了俺一跳.待 ...

  10. LoadRunner 学习笔记（1）性能测试常见术语

    并发用户数据:与服务器进行交互的在线用户数量 请求响应时间:从Client端发出请求到得到响应的整个时间 一般包括网络响应时间 + server的响应时间 事务请求响应时间:完成这个事务所用的时间 这 ...