Html5視頻、音頻、API控件---第二天
阿新 • • 發佈:2018-02-24
前端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"> 年周
<video src = "movie.mp4" controls = "controls"><video>
或者<video controls = "controls">
<source src = "movie.mp4">
<video>
屬性 值 描述
autoplay autoplay(可省略) 視頻自動播放
controls controls(可省略) 向用戶顯示播放控件
width 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];
載入視頻: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"> 輸入手機號碼格式
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"> 自定義驗證
Html5視頻、音頻、API控件---第二天