<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script type="text/javascript" src="jquery-1.9.1.js"></script>

</head>

<body>

<video id="video" width="500" controls="controls" preload="auto" autoplay style="background:#333" webkit-playsinline x-webkit-airplay>

    <source src='ceshi.mp4' type="video/mp4" -webkit-playsinline="true"></source>';

    您的浏览器不支持video标签

</video>

<hr />

<input type="button" onclick="pose()" value="暂停" />

<input type="button" onclick="play()" value="播放" />

<input type="button" onclick="restart()" value="重置" />

<input type="button" onclick="counttime()" value="获取总时长" />

<input type="button" onclick="currtime()" value="当前时间" />

<input type="button" onclick="fword(10)" value="前进10秒" />

<input type="button" onclick="rewind(10)" value="后退10秒" />

<input type="button" onclick="selecttimeplay(50)" value="在50秒处播放" />

<input type="button" onclick="fast(0.1)" value="快放0.1" />

<input type="button" onclick="slow(0.1)" value="慢放0.1" />

<input type="button" onclick="volumeadd(0.1)" value="音量+0.1" />

<input type="button" onclick="volumeless(0.1)" value="音量-0.1" />

<input type="button" onclick="muted()" value="静音" />

<input type="button" onclick="removemuted()" value="取消静音" />

<script>

    //获取video元素

    var video = document.getElementById("video");

    //暂停方法

    function pose(){

        video.pause();

    }

    //播放方法

    function play(){

        video.play();

    }

    //将全部属性回复默认值，视频恢复重新开始状态

    function restart(){

        video.load();

    }

    //获取视频总时长

    function counttime(){

        alert(parseInt(video.duration)+'s');

    }

    function currtime(){

        alert(parseInt(video.currentTime)+'s');

    }

    //前进10s

    function fast(time){

        video.currentTime += time;

    }

    //后退10s

    function fword(time){

        video.currentTime += time;

    }

    //快退

    function rewind(time){

        video.currentTime -= time;

    }

    //在50秒处播放

    function selecttimeplay(){

        video.currentTime = 50;

    }

    //快放0.1

    function fast(num){

        video.playbackRate += num;

    }

    //慢放0.1 不能点十次，也就是慢放到1时会暂停

    function slow(num){

        video.playbackRate -= num;

    }

    //音量加10%

    function volumeadd(num){

        video.volume += num;

    }

    //音量减10%

    function volumeless(){

        video.volume -= num;

    }

    //静音

    function muted(){

        video.muted = true;

    }

    //取消静音

    function removemuted(){

        video.muted = false;

    }

</script>

</body>

</html>

效果如下

视频收费处理，在做视频收费业务是，如果直接使用video api则会有js缓存的问题，解决该问题的办法是，用iframe嵌套视频代码把视频相关参数传递到该iframe里面，并且用js在iframe页面里面进行api的限定。

html video api控件总结的更多相关文章

  1. jquery和css自定义video播放控件

    下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...

  2. jQ效果：jQuery和css自定义video播放控件

    下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...

  3. h5 的video视频控件

    h5 的video视频控件 由于html5的流行,其中的video视频的使用很流行,使得可恨的IE9也能与时俱进了. video所支持的格式有mp4.ogg和wav三种. 例: HTML5 Video ...

  4. [端API] 控件在一个页面里open了，但其他页面打开这个控件怎么关闭

    加在控件的参数里<script type="text/javascript" src="../script/api.js"></script& ...

  5. H5视频播放器属性与API控件，以及对程序的解释

    一:理论 1.视频播放器的格式介绍 视频主要有三部分组成:视频.音频.编码格式 视频格式:avi.rmb.wmv.mpeg4.ogg.webm 2.H5的标签video的简单使用 <video ...

  6. video视频控件

    <!-- 视频播放内容 --> <!-- autoplay准备就绪会自动播放 --> <!-- controls,要自定义得去掉这个 -->   <video ...

  7. 不同版本的Api控件显示可能不同

    同样的一个布局, compileSdkVersion 24(android7.0)和 compileSdkVersion 18(android4.3)得到的结果可能不一样: <FrameLayo ...

  8. Google 地图 API V3 之控件

    Google官方教程: Google 地图 API V3 使用入门 Google 地图 API V3 针对移动设备进行开发 Google 地图 API V3 之事件 Google 地图 API V3 ...

  9. Google地图接口API之地图控件集(五)

    1.默认控件集 当使用一个标准的google地图,它的控件默认设置如下: (1). Zoom-显示一个滑动条来控制map的Zoom级别,如下所示:

随机推荐

  1. HDU 5790 Prefix（Hash + 主席树）

    题目链接  Prefix 题意  给定一个字符串序列,求第$l$个字符串到第$r$个字符串之间有多少个不同的前缀 强制在线 考虑$Hash$ 首先把所有前缀都$hash$出来,按顺序组成一个长度不超过 ...

  2. [笔记][FPGA]如何使用SignalTap观察wire与reg值

    0. 简介 在FPGA程序调试时,我们除了仿真还经常的会用到SignalTap进行板级调试,其可以真实有效的反应某些变量的变化,方便我们理解内在跳转,方便Debug的运行.SignalTap需要制定时 ...

  3. 洛谷——P2737 [USACO4.1]麦香牛块Beef McNuggets

    https://www.luogu.org/problemnew/show/P2737 题目描述 农夫布朗的奶牛们正在进行斗争,因为它们听说麦当劳正在考虑引进一种新产品:麦香牛块.奶牛们正在想尽一切办 ...

  4. Codeforces 235 E Number Challenge

    Discription Let's denote d(n) as the number of divisors of a positive integer n. You are given three ...

  5. Java 自定义序列化、反序列化

    1.如果某个成员变量是敏感信息,不希望序列化到文件/网络节点中,比如说银行密码,或者该成员变量所属的类是不可序列化的, 可以用 transient 关键字修饰此成员变量,序列化时会忽略此成员变量. c ...

  6. SQL Server 监控系列 —— 二

    http://www.cnblogs.com/bhtfg538/archive/2011/01/21/1939706.html

  7. 通过HTML5 FileReader实现上传图片预览功能

    原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...

  8. 使用sqlalchemy查询并删除数据表的唯一性索引

    简单描述表结构,字段类型 desc tabl_name 删除索引:alter table `db`.`table_name` drop index `index_name`  注意里面的特殊符号: ` ...

  9. DNS 域名解析过程

    当用户在浏览器中输入域名并按下回车键后,DNS解析会有如下7个步骤 浏览器缓存 浏览器会检查缓存中有没有这个域名对应的解析过的IP地址,如果缓存中有,这个解析过程就将结束.浏览器缓存域名也是有限制的, ...

  10. 【Unity3D自学记录】Unity3D之自制小钟表

    今天来写一个小钟表,事实上非常easy,就运用到了欧拉角. 首先创建时钟.分钟.秒钟以及4个点(12点.3点.6点.9点)偷懒了~~没弄那么多点. 时钟.分钟.秒钟这三个父级的中心一定要注意,我们旋转 ...