video的用法(video的意思以及用法)

Video的基本使用方法

1)

2)加入要添加预加载图片,添加属性poster="图片URL"

您的浏览器不支持video标签,请使用google浏览器浏览

注意:视频的格式不同,支持的浏览不同

常见的视频格式:ogg(ogv)/MPEG4(mp4)/WEBM(webm)

加入非要在不支持的浏览器上看效果,那么你得准备swf格式的视频

当前浏览器不支持 video直接播放,点击这里下载视频: 下载视频

2、常见固有属性

autoPlay(加载完成自动播放)

controls(使用的时浏览器默认的控件)

loop(循环播放)

width(video的宽度)

height(video的高度)

src(视频的地址)

video.currentTime(当前视频的播放事件)

video.duration(视频播放的总时长)

3、常见的事件(方法)

video.play()---播放视频

video.pause()---暂停视频播放

4、全屏设置:(注意设置全屏的时候,element的选取,不要加到video上面,否则全屏时会出现默认的控件,也有可能导致视频全屏时不可以看到画面,这里注意element一般时所有控制器与video标签最近的共同的父元素)

全屏:
       element.webkitRequestFullScreen();

element.mozRequestFullScreen();

element.requestFullScreen();

取消全屏:
       document.webkitCancelFullScreen();

document.mozCancelFullScreen();

document.cancelFullScreen();

5、设置音量

video.volume 取值范围为0-1

如果使用input[type='range']时,可以设置range的min=0,max=10,在onchange事件时取得range的值除以10表示音量大小

eg:video.volume = $("input[type='range']").val()/10;

注:如果需要设置静音模式,直接将音量设置为0

video.volume = 0;

6、播放进度

video.currentTime的改变是通过video的timeupdate事件而改变,所以在设置的时候,我们需要在值改变的时候,添加事件video.addEventListener("timeupdate",playTime,true);

eg1:

$("#playRange").on("change",function(){

// alert($(this).val())

vdo.currentTime = $(this).val();

vdo.addEventListener("timeupdate",playTime,true);

})

eg2:

$("#playRange").on("mousedown",function(){

vdo.removeEventListener("timeupdate",playTime,true);

$(this).on("mouseup",function(){

// alert($(this).val())

vdo.currentTime = $(this).val();

vdo.addEventListener("timeupdate",playTime,true);

})

})

playTime方法用来设置显示播放的事件,并且当前播放的进度和range匹配

function playTime(){

var nowTime = parseInt(vdo.currentTime);

$("#playRange").val(nowTime);

$(".playTime").html(nowTime "/" allTime);

}

(0)

相关推荐

  • 公式vlookup对比数据怎么用法(excel函数vlookup用法)

    格式"=VLOOKUP(要查谁,在哪查,返还值为查询范围的第几列,精确还是近似)".中间用逗号隔开.如:A列为全部人员姓名,B列为对应全部身份证号码,C列为部分人员姓名(有在A列里 ...

  • 函数substitute的用法(substitute函数高级用法)

    Hello大家好,我是帮帮.今天跟大家分享一下EXCEL中Substitute替换函数套用技巧,复杂问题轻松化解,逻辑简单不烧心.有个好消息!为了方便大家更快的掌握技巧,寻找捷径.请大家点击文章末尾的 ...

  • Java开发中的break的三种用法

    在Java开发中,有那么几个关键词非常常用,如:return.continue.break:其实它们本身含义不大,英文解释一句话的事情,但是当它们依附循环或者switch语句时,就变得复杂而有意思了. ...

  • Excel VBA中range对象的常见用法

    range对象在Excel VBA中的运用也是比较常见的,对于区域数据的操作往往我们需要用到range对象,下面小编根据自身的实战为大家分享一下range对象的常见用法! range的常见用法 01 ...

  • Excel中数值取整及INT和TRUNC及ROUND的用法区别

    Excel中有些数据不需要小数位,就会涉及到数据的取整问题. 数值取整也分为3个: 1.格式取整:也就是在单元格里面通过格式控制显示为整数(四舍五入得到),复制其单元格内容到其他单元格里面的值依然包含 ...

  • Excel VBA中if语句的用法

    我们都知道作为程序,它有两大结构,一个是if语句,一个是循环语句.在VBA中if语句即使基本的语句结构,也是用的非常广的语句,实用性也是非常强的,下面小编为大家分享VBA中if语句的详细用法! if语 ...

  • excel中lookup与vlookup的用法

    工作表数据引用用起来很方便,可具体怎么操作呢,下面介绍lookup与vlookup的用法 操作方法 01 lookup的用法:语法形式:lookup(lookup_value,lookup_vecto ...

  • 教您用Air Video随时随地观看视频

    Air Video 一款可以通过Wi-Fi观看本地视频的软件,如果不是iPhone/iPad所支持的格式,软件将会自动转化格式进行播放,而转换的过程您几乎不需要等待就可以直接观看,不过还是有点耗电! ...

  • Ubuntu 命令技巧大全整理

    目录 1 前言 2 安装升级 2.1 查看软件xxx安装内容 2.2 查找软件库中的软件 2.3 显示系统安装包的统计信息 2.4 显示系统全部可用包的名称 2.5 显示包的信息 2.6 查找文件属于 ...