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

1、video、audio标签
<video src = "movie.mp4" controls = "controls"><video>
或者<video controls = "controls">
<source src = "movie.mp4">
<video>
属性 值 描述
autoplay autoplay(可省略) 视频自动播放
controls controls(可省略) 向用户显示播放控件
width px 播放器宽度
height px 播放器高度
loop loop、数字 播放完是否继续播放、播放次数
preload proload 是否等待加载完再播放
src url 视频url地址
poster imgurl 加载等待的画面图片
autobuffer autobuffer 设置为浏览器缓冲方式,不设置autoplay时有效
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、表单输入类型
类型 使用示例 含义
email <input type="email"> 输入邮箱格式
tel <input type="tel"> 输入手机号码格式
url <input type="url"> 输入url格式
number <input type="number"> 输入数字格式
search <input type="search"> 搜索框(体现语义化)
range <input type="range"> 自由拖动滑块
color <input type="color"> 拾色器
time <input type="time"> 小时
date <input type="date"> 年月日
datetime <input type="datetime"> 时间输入框
month <input type="month"> 年月
week <input type="week"> 年周

2、表单元素
元素 含义
<datalist> 数据列表
<keygen> 生成加密字符串
<output> 输出结果
<meter> 度量器
3、表单属性
属性 用法 含义
placeholder <input type="text" placeholder="请输入用户名"> 占位符
autofocus <input type="text" autofocus> 自动获得焦点
multiple <input type="file" multiple> 多文件上传
autocomplete <input type="text" autocomplete="off"> 值:off、on 自动完成
form <input type="text" form="某表单ID">
novalidate <form novalidate></form> 关闭验证
required <input type="text" required> 必填项
pattern <input type="text" pattern="\d"> 自定义验证

原文地址:http://blog.51cto.com/13517854/2072622

时间: 2024-10-11 11:00:57

Html5视频、音频、API控件---第二天的相关文章

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

MediaElement - 播放视频或音频的控件

<StackPanel Margin="0 50">                        <!--                MediaElement 播放视频或音频的控件               AreTransportControlsEnabled 是否显示默认控制条              IsFullWindow  是否全屏显示播放器                -->            <MediaElement Nam

HTML5 progress和meter控件

在HTML5中,新增了progress和meter控件.progress控件为进度条控件,可表示任务的进度,如Windows系统中软件的安装.文件的复制等场景的进度.meter控件为计量条控件,表示某种计量,适用于温度.重量.金额等量化的表现. 目录 1. <progress> 进度条 1.1 特性 1.2 示例 2. <meter> 计量条 2.1 特性 2.2 示例 1. <progress> 进度条 说明:表示任务的进度,如Windows系统中软件的安装.文件的复

5.9 HTML5 新增表单控件 ---不是特别重要

HTML5 新增表单控件新增类型:网址 邮箱 日期 时间 星期 数量 范围 电话 颜色 搜索这些控件基本不使用:因为在不同的浏览器中效果不一样.产品设计中不允许多个浏览器效果不同,必须统一. <label>网址:</label><input type="url" name="" required><br><br> <label>邮箱:</label><input type=&q

wpf显示视频,image控件闪屏,使用winform控件实现

使用C#调用mingw的动态库实现视频识别软件,程序通过C++调用opencv打开视频,将图像的原始数据以rgb24的方式传递给C#端,C#通过构造图像对象给控件赋值的方式显示图片. 一开始使用wpf的控件image: 1 while (true) 2 { 3 S_IMG simg = Mingw.display(); //调用取图像函数 4 int size = simg.w * simg.h * 3; 5 byte[] data = new byte[size]; 6 Marshal.Cop

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

加在控件的参数里<script type="text/javascript" src="../script/api.js"></script>        <script type="text/javascript">        apiready = function() {var map= api.require('baiduMap'); map.open({ fixedOn:api.frameName

Windows media player控件第二次播放时无法全屏

新建MFC工程,插入windows media player control,属性设置fullscreen为true,设置好URL参数. 添加CWMPPlayer4,CWMPControls3类. 控件绑定关联变量CWMPPlayer4 m_player并设CWMPControls3 m_control = m_player.get_controls(); 为了达到循环播放的目的,响应PlayStateChange消息,消息处理函数中是如下两句: m_control.play(); m_play

js判断视频预览控件

原因分析:无法判断浏览器是否已经安装控件的原因是PlaybackOCX类没有直接提供一个判断是否安装控件的方法. 解决思路:用PlaybackOCX控制视频播放的步骤为1.初始化PlaybackOCX对象 2.然后调用PlaybackOCX对象的setPlayback方法,如果已经安装浏览器控件则调用成功返回0,否则调用失败返回1.因此如果调用setPlayback方法返回1时,说明没有安装浏览器控件. 代码展示:   function isBrowserIE() {   var appName

细说新一代HTML5/JavaScript的UI控件wijmo5 的新架构

Wijmo 5是一组JavaScript控件,但是不要与Widgets混淆.在此前开发Wijmo的时候,我们能够用像jQuery UI和jQuery Mobile Widget 框架来构建它,同时也为我们构建Web框架--Wijmo节省了时间. 但是,当我们希望构建一个更现代的Wijmo 5,我们认为现在是时候重新审视JavaScript UI组件,尤其是语法和API接口.在做了大量的研究和讨论后,我们使用了"真正的JavaScript控件(true JavaScript Controls)&q