<!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. kafka生产者客户端

    kafka的生产者 1. 生产者客户端开发 ​ 熟悉kafka的朋友都应该知道kafka客户端有新旧版本,老版本采用scala编写,新版本采用java编写.随着kafka版本的升级,旧版本客户端已经快 ...

  2. openssl转换各种证书的语法收集

    参考网址:https://www.sslshopper.com/ssl-converter.html 个人总结:先找准要生成什么证书先,尤其是正规购买的流程与openssl生成的不一样,所以先确定是什 ...

  3. nginx和php通信

    #启动php-fpm服务 #配置nginx.conf worker_processes ; worker_rlimit_nofile ; worker_cpu_affinity ; #error_lo ...

  4. Javascript中的e.keyCode大全

    keycode 8 = BackSpace BackSpace keycode 9 = Tab Tab keycode 12 = Clear keycode 13 = Enter keycode 16 ...

  5. 【mybatis】mybatis中insert操作,返回自增id

    需求是这样的: mybatis中insert操作,返回自增id,因为这个自增id需要给后续业务用到. 原本是这样的: 将insert语句传入,正常执行insert操作,返回int永远是 0[失败] 或 ...

  6. iOS -- SKKeyframeSequence类

    SKKeyframeSequence类 继承自 NSObject 符合 NSCodingNSCopyingNSObject 框架  /System/Library/Frameworks/SpriteK ...

  7. sublime的tab和spaces空格切换的坑

    python是严格要求对齐或者叫缩进的: 使用sublime对python进行编程时,可以使用tab或者空格,但是不能混用.特别是从外面把代码拷贝进sublime的时候,更要注意是否一致. 简单介绍一 ...

  8. 5.【nuxt起步】-swiper组件

    接下来是一个比较常用,也比较重要的组件 swiper,可以自行搜索 vue swiper,有很多开源组件,我这里就复用之前一个熟悉的, 1.新建component/banner.vue 刷新报错: 要 ...

  9. 第六讲_图像分割Image Segmentation

    第六讲_图像分割Image Segmentation 语义分割(semantic segmentation) 常用神经网络介绍对比-FCN SegNet U-net DeconvNet 目录 +三大数 ...

  10. C#中异常处理和Java的区别

    捕获异常,同样是try...catch...,这个完全一样: 抛出异常,同样是throw,这个完全一样: 函数抛出怎样的异常,Java中可以用throws定义,而C#中不用定义,相当于throws E ...