HTML5视频、音频播放事件属性与API控件

1、video、audio标签

<video src = "movie.mp4" controls = "controls"><video>

或者<video controls = "controls">

<source src = "movie.mp4">

<video>

2、HTML5视频API 控件

(1)获得video标签

①通过DOM对象 var video = document.getElementById("videoID");

②通过jQuery 的方法 var video = $("#videoID")[0];

video标签的属性

载入视频:load()

播放视频:play()

暂停:pause()

快进10秒:currentTime +=10

播放速度增加:playbackRate ++

播放速度增加0.1:playbackRate += 0.1

音量增加:volume += 0.1

静音:muted = true

(3)事件

canplay ?

duration 媒体长度

timeupdate ?媒体当前位置

三、表单
1、表单输入类型

2、表单元素

3、表单属性

原文地址:https://blog.51cto.com/14473726/2436526

时间: 2024-10-11 19:38:05

HTML5视频、音频播放事件属性与API控件的相关文章

H5视频播放器属性与API控件

一:理论 1.视频播放器的格式介绍 视频主要有三部分组成:视频.音频.编码格式 视频格式:avi.rmb.wmv.mpeg4.ogg.webm 2.H5的标签video的简单使用 <video src="abc.mp4" controls="controls"></video> 或者: <video  width="300" controls="controls"> <source s

Html5视频、音频、API控件---第二天

1.video.audio标签<video src = "movie.mp4" controls = "controls"><video>或者<video controls = "controls"><source src = "movie.mp4"> <video>属性 值 描述autoplay autoplay(可省略) 视频自动播放controls contro

[转载]html5 audio音频播放全解析——html5系列

序 html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在听音乐看视频唯一的办法就是用flash意思是当你没有给浏览器装载Flash插件的话 那么音乐视频即是空谈,html5 audio的出现改变了这一格局,因为你可以不用Flash插件就可以听音乐看视频,当然这些能否实现还跟你用的浏览器有关. 这是demo地址 http://www.feman.cn/h5/audio.html 在手机上浏览效果会更好 文章结构 1

html5 audio音频播放全解析

序 html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在网页上听音乐看视频唯一的办法就是用flash意思是当你没有给浏览器装载Flash插件的话 那么音乐视频即是空谈,html5 audio的出现改变了这一格局,因为你可以不用Flash插件就可以听音乐看视频,当然这些能否实现还跟你用的浏览器有关. 这是demo地址 http://www.feman.cn/h5/audio.html(IE8以下不支持) 在手机上浏

HTML5的video虽然可用controls来展示控件

HTML5的video虽然可用controls来展示控件,并进行控制播放暂停等,但是不同的浏览器显示的效果可能不一样,所以很多时候我们需要使用Dom来进行自定义的一些操作和控制.下面是一个小例子. 当然效果不是很美观,若想好看的可以自己设置css样式等. 复制代码 代码如下: <div id="video_div" style="text-align:center;"> <button onclick="playPause()"

android内部培训视频_第三节(3)_常用控件(ViewPager、日期时间相关、ListView)

第三节(2):常用控件之ViewPager.日期时间相关.ListView  一.ViewPager 实例:结合PagerAdapter滑动切换图片  二.日期时间相关:AnalogClock\DigitalClock\DatePicker\TimerPicker\DatePickerDialog\TimePickerDialog 三.ListView 实例1:城市选择器 实例2:自定义列表项 百度网盘视频下载地址:http://pan.baidu.com/s/1c0ip6la android内

百度 flash html5自切换 多文件异步上传控件webuploader基本用法

双核浏览器下在chrome内核中使用uploadify总有302问题,也不知道如何修复,之所以喜欢360浏览器是因为帮客户控制渲染内核: 若页面需默认用极速核,增加标签:<meta name="renderer" content="webkit"> 若页面需默认用ie兼容内核,增加标签:<meta name="renderer" content="ie-comp"> 若页面需默认用ie标准内核,增加标签

窗体属性和公共控件

winform和web的最大区别:web执行C#代码,是在服务器上执行完毕后,将执行完生成的HTML 代码返回给客户端 winform所有的代码都是在本地电脑上,所有代码功能的执行都是 在本地电脑上,消耗本地电脑的内存和CPU program.cs里设置主入口点,在Application.Run(new windows窗 体名(可以修改)) 布局:AutoScroll:指示当控件内容超出它的课件区域时是否自动显示滚 动条,true显示false隐藏 Location - 窗体启动时的位置,控件左

WinForm窗体重要属性与公共控件的重要属性

winform和web的最大区别:web执行C#代码,是在服务器上执行完毕后,将执行完生成的HTML代码返回给客户端 winform所有的代码都是在本地电脑上,所有代码功能的执行都是在本地电脑上,消耗本地电脑的内存和CPU 整个窗体相当于一个类 窗体重要属性:布局:AutoScroll - 内容超出范围是否出现滚动条 Location - 窗体启动时的位置(默认)  可用数值调动窗体打开时的位置StartPosition - 窗体启动时的位置 如果想让窗体启动时在你设定的位置,StartPosi