動畫GIF在網上流行是有理由的,它們提供比普通圖像更多的參與度,同時與典型視頻相比更容易消化,然而,GIF存儲視頻需要大量內存,導致頁面加載時間慢和數據使用率高。使用HTML5視頻,您可以將GIF內容的大小減少多達98%,同時仍然保留瀏覽器中GIF格式的獨特品質。
動畫GIF對我們來說很有意義, 在所有瀏覽器中,它們很容易制作并且運行良好。但GIF格式最初并不適用于動畫。GIF格式的原始設計是提供一種使用無損壓縮算法(稱為LZW壓縮)壓縮單個文件內的多個圖像的方法,這意味著它們可以在相當短的時間內下載,即使在慢速連接上也是如此。之后,添加了基本的動畫功能,允許文件中的各種圖像(幀)繪制時間延遲。默認情況下,構成動畫的一系列幀僅顯示一次,在顯示最后一幀后停止。Netscape Navigator 2.0是第一款增加動畫GIF循環功能的瀏覽器,它導致動畫GIF的興起,知道現在依然在流行中。
作為動畫平臺,GIF格式非常有限。動畫中的每個幀僅限于256種顏色的調色板,多年來,壓縮技術的進步使得動畫和視頻文件的壓縮和使用方式得到了一些改進,與正確的視頻格式不同,GIF格式不利用任何新技術,這意味著即使幾秒鐘的內容也會導致非常大的文件大小,因為存儲了大量重復信息。
?
他們是由W3C推薦的前端三件套,并且互相之間可以很好地配合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 關于網頁的一些屬性 -->
<!-- css樣式 -->
</head>
<body>
<!-- 主體內容 -->
</body>
</html>
剛學半年web,只是寫個作業可以這么用吧(●’?’●)
前為名字,后為文件格式
項目名 文件夾
images 文件夾
css 文件夾
網站名1.css
...
html 文件夾 也可以直接把每個網站卸載更外面一層
網站名1.thml
...
html的內容由一個個標簽 嵌套或并列 組成
標簽用 <標簽名>內容</標簽名> 或者 <標簽名/>
文字可以直接輸入,標簽只不過是用來控制他們的 位置和顯示效果 的
通用的標簽主要
前者較為普遍;后者教為特殊
主要用來定一個區域來 劃分更小的區域或者直接寫入內容。
使用時用前者。
有許多特殊的標簽,他們沒有特別之處,只是特別拎出來以方便理解文件的整個結構
如
英文 | 通常的內容 |
header | 頁眉 |
nav | 導航欄 |
main | 主要內容 |
article | 與上下文無關的獨立內容 |
section | 其中一個區域 |
aside | 側欄或邊欄 |
footer | 頁腳 |
detail | 某個細節的描述 |
summary | detail的標題 |
最后兩個detail和summary通常是相互配合的。
上面這些都是有著特殊用處的標題,可以用下面的這些替代,但使用時相對復雜一些
主要用來直接寫入內容。
使用時前后使用方法的皆有
空行之前的表示重要
用前者的有
英文 | 含義 |
h1 | 標題,字體最大的標題 |
中間部分 | 字體依次減小的標題 |
h6 | 標題,字體最小的標題 |
p | 段落 |
br | 換行 |
- | - |
hr | 水平線 |
sub | 下標文本 |
sup | 上標文本 |
ins | 插入文本 |
del | 刪除文本 |
wbr | 此處適合換行 |
pre | 預格式文本 |
address | 表示地址 |
bdo | 文字方向 |
blockauote | 長的引用語 |
q | 短的引用語 |
mark | 定義有記號的文本 |
table te td th是相互配合組成一個表格的,table>tr>td
表格 | |
table | 表格 |
tr | 行標簽 |
td | 列標簽 |
th | 標題列 |
li必須在ol或ul內。通常用ul li
列表 | |
ol | 有序列表 |
ul | 無序列表 |
li | 列表項 |
表單可以用作問卷等
input屬性typr value
表單 | |
form | 表單 |
label | 點擊時自動定位到里面的input |
input | 輸入 |
select | 多選 |
option | 多選的一個選項 |
用后者的有
英文 | 含義 |
br | 換行 |
img | 引入圖片 |
video | 引入視頻 |
audio | 引入 |
abbr | 此處適合換行 |
img video audio使用時需要更多的屬性,比如URL路徑等
以video為例:<video src="路徑" autoplay="autoplay" controls="controls"/>
依次表示 URL路徑 自動播放 顯示播放器控件
他們有各自的屬性
都必須有src屬性以表示路徑,img只需要src即可顯示
各自可以在屬性里選擇width和height以顯示寬度和高度(這兩個在css 屬性里介紹)
video和audio(他們有一樣的可選屬性)的其他可選屬性在下面顯示,一般一個只有一個可選擇的值,那個值就是名字自己(言下之意就是,只寫自己需要的屬性)
英文 | 作用 |
autoplay | 自動播放 |
controls | 顯示控件 |
loop | 循環播放 |
poster | 定義視頻下載時需要的圖像,值用路徑表示 |
preload | autoplay時無效,定義文件預加載的時機,有3個值,具體在下面介紹 |
muted | 靜音 |
preload的值
auto:默認值,直接加載 音頻/視頻
metadata:僅加載 音頻/視頻 元數據
none:不加載 音頻/視頻
用于標簽的定義
class表示類,可以用于很多類似的標簽,以方便使用一樣的css樣式
id是唯一的,可以為獨特的標簽單獨使用樣式
css一共有3段:選擇器{屬性:值;…}
樣式有3種添加的方法
常見的偽 選擇器/元素 | 表示方法 |
通用選擇器 | * |
標簽選擇器 | 標簽名 |
類選擇器 | .類名 前面是一個下點 |
ID選擇器 | #ID號 |
- | 以下選擇器用于分隔不同的選擇器 |
后代選擇器 | 一個空格,其實這不是個選擇器(但很像),可以選擇出所有的后代 |
分組選擇器 | , 逗號 |
子元素選擇器 | > |
- | 以下選擇器均需緊跟在最上面的選擇器后 |
相鄰兄弟選擇器 | + |
不相鄰兄弟選擇器 | ~ |
屬性選擇器 | [屬性值] 詳細介紹 |
偽類選擇器 | :單詞 詳細介紹 |
偽屬性 | ::單詞 詳細介紹 |
后一個選擇器不一定是前一個的子元素,也可以通過一些符號進行兄弟之間的變化 |
div>p
選中選中div中的p子元素(沒有中間層的關系)
div+p
選中跟在div后的p
div~p
選中前面有相同父元素的div 的p
| 屬性選擇器 | 介紹,有紅字是因為|豎線在編輯器里是特殊字符,在代碼塊內才能正常顯示 |
|–|–|
| [屬性] | 具有該屬性的 |
|[屬性=某值]|屬性=某值的|
|[屬性~=某值]|屬性=用空格分隔的字詞列表,某值是其中一個值
|[屬性|=某值]|屬性=用|分隔的字詞列表,某值是其中一個值
|[屬性^=某值]|具有該屬性,以 某值 開頭
|[屬性$=某值]|具有該屬性,以 某值 結尾
|[屬性*=某值]|具有該屬性,包含 某值
這類選擇器全部按前面(一部分)選擇器的介紹,緊跟在后面,以":"(冒號)為標識符(即以它開頭,可以看成選擇器的一部分)
以下均不寫冒號
偽類選擇器 | 介紹 |
- | 下面定義的是應用于超鏈接文本a的4種(鼠標在該元素的)狀態, |
link | 正常狀態(未訪問) |
visited | 被訪問之后 |
hover | 經過時 |
active | 單機被激活時 |
偽類選擇器也有一些分類,見下 | |
結構偽類選擇器 | 介紹 |
– | – |
first-child | 第一個子元素 |
lastchild | 最后一個子元素 |
- | 注意以下4個帶()的,()內可以是一個算式或數字,選中符合結果的(可以是多個) |
nth-child() | 正數 第()個子元素 |
nth-last-child() | 倒數 第()個子元素 |
nth-of-type() | 父元素的 第()個同類子元素 |
nth-last-of-type() | 父元素的 倒數 第()個同類子元素 |
first-of-type | 父元素的 第一個同類子元素 |
last-of-type | 父元素的 倒數 第一個同類子元素 |
only-child | 父元素的唯一的子元素,(當然,)可能有很多子元素是唯一的 |
only-of-type | 父元素的唯一一個相同類型的子元素 |
empty | 沒有任何內容的子元素 |
狀態偽類選擇器 | 介紹,UI元素一般指包含在form元素內的表單元素 |
enabled | 范圍內的所有可用UI元素 |
disabled | 范圍內的所有不可用UI元素 |
checked | 范圍內的所有可用UI元素 |
否定偽類選擇器 | |
not() | 不匹配該元素的選擇器,()里是一個選擇器的屬性,將選取 不符合該選擇器 的元素 |
目標偽類選擇器 | |
target | 前面的匹配元素被相關URL指向,樣式效果才生效,是動態選擇器 |
用法:緊跟在后面,用兩個":“作為標識符(也可以只用一個,但兩個更好)。css樣式里需包含content屬性,值為帶引號的字符(當然也可以什么都不寫)
如:div:after{content=”";}
偽元素 | 介紹 |
before | 在前面插入一段文字 |
after | 在后面插入一段文字 |
用途:廣泛
用法:有數字和單位組成:200px
當數字為0時,單位可有可無
使用頻率:px最常用,其次em
單位有絕對和相對之分
相對單位 | 單位長度的含義 |
px | 像素(Pixel) |
em | 相對于父元素字體大小的倍數 |
ex | 相對于字符x的高度,通常為字體高度的一半 |
ch | 相對于數字0的寬度 |
rem | 相對于根元素(html)字體大小的倍數。若未被設置,則相對于瀏覽器的默認字體尺寸(一般為16px) |
vw | 相對于視口的寬度(視口被均分為100vw) |
vh | 相對于視口的高度(視口被均分為100vw) |
xmin | 相對于視口的 高度或寬度 中較小的那個(小的被均分為100vmin) |
vmax | 相對于視口的 高度或寬度 中較大的那個(大的被均分為100vmax) |
– | – |
絕對單位 | 單位長度的含義 |
pt | 點(point) |
pc | 派卡(pica),=我國新四號鉛字的尺寸 |
in | 英寸(inch) |
cm | 厘米(centimeter) |
mm | mm(millimeter) |
用途:屬性transition(變化時間)
用法:數字+單位:200ms
使用頻率:都常用
單位 | 含義 |
s | 秒 |
ms | 毫秒 |
用途:
用法:數字+單位:120deg
使用頻率:第一個deg最常用
單位 | |
deg | 角度(degrees) ,一個圓 360° |
grad | 梯度(gradians),一個圓 400梯度 |
rad | 弧度(radians),一個圓 PI |
turn | 轉、圈(turns) |
用途:color,background(-color)
用法:值
使用頻率:2和-1最為常用,-1代表最后一個
值 | 描述 |
white | 白色 |
具體英文單詞↑ | 代表這個單詞指代的顏色 |
rgb(r,g,b) | RGB值,rgb分別代表紅綠藍,[0,255] |
rgba(r,g,b,a) | 見上↑.a代表透明度 [0,1] |
rgb(r%,g%,b%) | RGB值(255*x%),三個值[0,100] ,最后即為0%-100% |
#rrggbb | RGB值,每個值用 兩位 16進制數 表示(大小寫不敏感),最后值在0-255 |
hsl(h,s,l) | hsl分別代表 色相(hue,[0,360])/飽和度(saturation,[0%,100%])/亮度(lightness,[0%,100%]) |
hsla(h,s,l,a) | ↑ a代表透明度 |
只在屬性font-family中用到,定義字體類型
{font-family="微軟雅黑"}
也可以不用雙引號
{font-family=微軟雅黑}
長度表示一欄:
1:值完全用長度表示,下面不再具體介紹
其他值的類型:值不能用長度表示,能用其他的較規范的表示表示
0:值不能用長度表示,也無法用其他規范的值表示
>1:有多個值,都用長度表示(同時出現多個值:長度可變)
屬性 | 含義 | 長度表示 |
width | 寬度 | 1 |
height | 高度 | 1 |
position | 定位方式 | 字符 |
display | 顯示方式 | 字符 |
float | 浮動方式 | 字符 |
clear | 清除部分浮動 | 字符 |
margin | 外邊距 | 1-4 |
border | 邊框 | 1-4 |
padding | 內邊距 | 1-4 |
text-align | 字體左右的對齊方式 | 字符 |
text-indent | 文字之前空多少長 | 1 |
background | 背景,包括背景圖,背景色,是否重復 | 0 |
line-heignt | 行高 | 1 |
font-family | 字體 | 字符 |
font-size | 字的大小 | 1 |
font-weight | 字的粗細 | 1 |
color | 字的顏色 | 顏色 |
opacity | 透明度0-1 | 0 |
z-index | 離屏幕遠近,越大越顯示在上面 | 0 |
transition | 狀態變化的時間 | 時間 |
animation | 動畫 | 0 |
overflow | 溢出 | 字符 |
值 | 含義 |
absolute | 絕對定位,相對于最近的定位過的父元素偏移 |
relative | 相對定位,在文件流中,相對自生原本在的位置偏移 |
fixed | 絕對定位,相對視口偏移 |
這里提到了偏移,它相對于定位的位置進行偏移 | |
relative在文件流中的意思是,在這個頁面中單獨占據一塊空間,原始位置不會與在文件流中的同級元素重疊 |
block,none,grid較為常用
值 | 含義 |
block | 塊狀元素 |
none | 不顯示 |
flex | flex布局 |
grid | grid布局 |
inline | 行內元素 |
inline-block | 行內塊元素 |
grid和flex可以去網上找資料學習
著重介紹一下grid布局
含義:可以方便地進行網格狀的布局,而后可以隨意組合,分配給子元素
有許多屬性和它配合使用(前提:display:grid,至少與前3個一起使用,前4個可以更美觀地表示)
屬性 | 含義 | 用法與解釋 |
grid-template | 融合了下面上半部分的所有項 | 較為復雜,不講 |
grid-template-rows | 每行的寬度(單獨設置) | 多個 長度/auto/xfr 表示,有幾行寫幾個(空格分開) |
grid-template-colums | 每列的寬度(單獨設置) | ↑ 有幾列寫幾個 |
grid-template-areas | 給每個格子命名,名字一樣則合并 | 每行一對雙引號,(適當使用回車) |
grid-gap | 行間距和列間距(統一設置) | 行間距 列間距 |
grid-row-gap | 行間距(統一設置) | 長度 |
grid-colum-gap | 列間距(統一設置) | 長度 |
place-items | 內容的 左右和上下 位置情況 | ↓ start/end/center/stretch |
align-items | 內容的 左右 位置情況 | ↑ 開頭/末尾/中間/拉伸以盛滿 |
justify-items | 內容的 上下 位置情況 | ↑ 對align來說,左是開頭,右是末尾 |
place-content | 整個表格 左右和上下 位置情況 | ↑ 對juestify來說,上是開頭,下是末尾 |
align-content | 整個表格的 左右 位置情況 | ↑有兩個值的(place),用空格分開 |
justify-content | 整個表格的 上下 位置情況 | ↑ |
– | – | 以下都是子元素獲得父元素分配的某個空間的語句 |
grid-template-area | 用指定的名字獲取父類給這個名字的空間 | 字符串 |
– | – | 以下用 起始/末尾 的(間隔,即gap) 行/列 獲得空間 |
grid-area | 起始/末尾 的 行/列 | 起始行/起始列/末尾行/末尾列 |
grid-row | 起始/末尾 的行 | 起始行/末尾行 |
grid-row-start | 起始 行 | 起始行 |
grid-row-end | 末尾行 | 末尾列 |
grid-column | 起始/末尾 的列 | 起始列/末尾列 |
grid-column-start | 起始列 | 起始列 |
grid-column-end | 末尾列 | 末尾列 |
著重介紹一下flex布局
含義:可以方便地進行彈性布局,尤其是垂直對齊的問題
有許多屬性和它配合使用(前提:display:flex)
| 屬性 | 含義
|–|–|–|
|flex-direction| 決定主軸的方向
| justify-content | 子元素在主軸方向上的分布方式
| align-items | 子元素在副軸方向上的分布方式
flex-direction的值 | 含義 |
row | 從上到下 |
row-reserve | 從下到上 |
column | 從左到右 |
column-reserve | 從右到左 |
justify-content的值 | 含義 |
flex-start | 主軸起始除處 |
flex-end | 主軸末尾處 |
center | 主軸中間 |
space-around | 元素兩邊留空隙,每個元素各占一份,不會像magin一樣重合 |
space-between | 元素之間留空隙,這意味著最邊上沒有空隙 |
align-items的值 | 含義 |
flex-start | 副軸起始除處 |
flex-end | 副軸末尾處 |
center | 副軸中間 |
stretch | 全部占滿 |
不設置這個屬性,它可能會在區域之外顯示
值 | 含義 |
auto | 超出長度時,可滾動 |
hidden | 隱藏 |
其他 | - |
分別代表 外邊距/邊框/內邊距
他們都可以用4個長度值表示,分別代表 上右下左 的長度
也可以有auto值,即自動,它會使兩邊相等
如 margin:0 auto;
它的左右兩邊是相等的
后面的值可以省略,但至少有第一個值
第4個值(左)省略,則=第2個值(右)
第3個值(下)省略,則=第1個值(上)
第2個值(右)省略,則=第1個值(上)
他們的四個值可以單獨設置,以margin為例子
margin-top,margin-right,margin-bottom,margin-left
值 | 含義(浮動方向/對齊方向) |
left | 左 |
center | 中 |
right | 右 |
先清除上一個區域來的浮動(float),而后可以設置自己的浮動
值 | 清除浮動 |
left | 左 |
right | 右 |
both | 左右 |
屬性自由書寫,其中的屬性可以缺少一些或調換順序
下面是兩個較頻繁使用的格式
有多個子屬性
子屬性 | 含義 | 值 |
background-image | 圖片鏈接 | url(“路徑”) |
background-repeat | 是否重復 | repeat/no-repeat |
background-position | 背景圖的起始位置 | |
background-position-x | 離左邊距離 | 長度/x% |
background-position-y | 離上邊距離 | 長度/y% |
background-color | 背景色 | 顏色 |
background-size | 背景大小 | 長度 長度 |
background-attachment | 是否隨著滾動而滾動 | scroll(默認)/fixed(不會)/local(會) |
<script type="text/javascript">
變量及賦值
計算語句
函數
事件
</script>
一定有事件,因為沒有事件,js就沒有什么意義
所有類型的變量 都用 var 變量名=值; 來定義
數據類型 | 含義 | 值 |
Undefined | 定義但未賦值 | undefined |
Null | 未定義,由Undefined衍生而來,值==undef | null |
Boolean | 布爾類型 | true false |
Number | 數字,正數,浮點數等, | 數字 |
String | 字符串,用單引號或雙引號都可 | 字符串 |
Object | 項目,上面有屬性,如{name:“myname”,age:18} | |
Array | 數組可以混雜其他類型,如[1,“myname”] | |
DOM對象 | 一個具體的標簽,如window, document,element |
可用數據類型 | 數據類型相關函數 | 目的類型 | 含義與用法 |
Boolean Number | toString() | String | 變換成字符串 |
- | 下面兩個 String轉Number 的函數 | - | 下面的都把源操作數放()里 |
String | praseInt() | 整數(Number) | 字符串變整數 |
String | praseFloat() | 浮點數(Number) | 字符串變浮點數 |
- | 下面的是三種強制類型轉換 | - | |
所有 | Boolean() | Boolean | 空字符串 0 undefined null 值為false,其他的true |
所有 | Number() | Number | 匹配整個數,fasle null為0,true為1 |
所有 | String() | String | 強制類型轉換,變成字符串 |
isNaN | 判斷是不是數 |
賦值符 | 含義 |
= | 右邊賦給左邊 |
– | – |
運算符 | |
+ | 加 |
- | 減 |
* | 乘 |
/ | 除 |
% | 余 |
++ | 自增,放在數的 前/后 不一樣 |
? : | 三目運算符 |
( ) | 提高優先級,左括號,右括號 |
- | - |
判斷符 | |
> | 大于 |
>= | 大于等于 |
< | 小于 |
<= | 小于等于 |
== | 值相等 |
!= | 值不相等 |
=== | 值和類型 都相等 |
!== | 值和類型 都不相等 |
- | - |
運算賦值符 | 左邊的值加上右邊的值,再賦值給左邊 |
+= | |
-= | |
*= | |
\= | |
%= |
語句 | 使用 |
定義及賦值 | var i=3;也可以單獨定義/賦值,定義統一用var |
選擇(分支) | if-else或switch–case-default-break |
循環 | for或while或do-while |
跳出 | break或continue |
返回 | return |
一個事件只能綁定一個函數,如果一個事件要做多件事情,都放到一個函數里
表達形式:(被觸發)對象.事件屬性=…
不只是a有事件屬性,其他的標簽都有事件屬性
事件屬性有很多,根據可以觸發者(比如鼠標,鍵盤,窗口)的不同分類
只列舉常用的
鼠標觸發:onclick(點擊),onmouseover(鼠標再其上,和選擇器hover有點像,但有不同)
窗口觸發(被觸發對象必須是window):onload(窗口完成后)
動態綁定
寫在js樣式里,被包含在其他的事件的函數中綁定
對象需要給出
參照函數的三種綁定方式
靜態綁定
直接在標簽里綁定,這時候對象就是自己這個標簽
參照函數的第2種
比如 <p onclick="函數名(參數)">
函數里的組成與js的組成成分一致
函數定義的3種方式
參數可以有多個,定義時不需要聲明類型,只需要參數名即可
第2種定義方式可以讓定義在標簽內的事件連結到這個函數
事件綁定
前兩種定義方式
不需要 (參數)
需要用到匿名函數
直接用 事件=函數名(參數); 的結果
是 直接觸發事件
第3種定義方式一般直接賦給內部的事件,即 事件=function (){函數體}
所周知,16年無疑是直播行業的春天,同時也是H5的一次高潮。
so,到現在用H5技術在移動端做網頁直播也是見怪不怪了,但是!!!
今天我們的主角是webApp下播放視頻
參考文獻:
1)HTML5+CSS3+JQuery打造自定義視頻播放器
簡介
HTML5的<video>標簽已經被目前大多數主流瀏覽器所支持,包括還未正式發布的IE9也聲明將支持<video>標簽,利用瀏覽器原生特性嵌入視頻有很多好處,所以很多開發者想盡快用上,但是真正使用前還有些問題要考慮,尤其是 Opera/Firefox 和IE/Safari瀏覽器所支持的視頻編碼不同的問題,Google幾個月前發布的開源視頻編碼VP8有望能解決這一問題,另外Google還發布了開放網絡媒體項目WebM,旨在幫助開發者為開放網絡制作出世界級媒體格式,Opera, Firefox, Chrome和IE9都將支持VP8,而且Flash Player也將可以播放VP8,這就意味著我們很快就可以只制作一個版本的視頻然后在所有主流瀏覽器上播放了。另外一個主要的問題就是如何構建自定義的HTML5<video>播放器,這是目前Flash Player的優勢所在,利用Flash的IDE所提供的接口可以很方便的構建一個個性化的視頻播放器,那HTML5的<video>標簽要怎樣才能實現呢?這個問題就是本文所要解決的!我們將開發一個HTML5<video>視頻播放器的jQuery插件,并且可以很方便的進行自定義,將分為以下幾個部分:
1.視頻控制工具條
2.視頻控制按鈕
3.打包成jQuery插件
4.外觀和體驗
5.自定義皮膚
視頻控制工具條
做為一個專業的web開發人員,我們創建一個視頻播放器時一定希望它的外觀在各個瀏覽器中看起來一致(consistent),但是通過下面的圖可以看到目前各個瀏覽器提供的視頻控制工具條外觀各不相同:
那就沒辦法了,我們得自己從頭來創建這個控制工具條,利用HTML和CSS再加上一些圖片實現起來并不算很難,另外通過HTML5多媒體元素提供的API我們可以很方便將創建的任何按鈕與播放/暫停等事件進行綁定。
視頻控制按鈕
基本的視頻控制工具條要包含一個播放/暫停按鈕,一個進度條,一個計時器和一個音量控制按鈕,我們將這些按鈕放在<video>元素下面,并用一個div作為父容器:
Java代碼
<div class="ghinda-video-controls">
<a class="ghinda-video-play" title="Play/Pause"></a>
<div class="ghinda-video-seek"></div>
<div class="ghinda-video-timer">00:00</div>
<div class="ghinda-volume-box">
<div class="ghinda-volume-slider"></div>
<a class="ghinda-volume-button" title="Mute/Unmute"></a>
</div>
</div>
復制代碼
注意,我們使用元素的class屬性來代替ID屬性是為了方便在一個頁面上使用多個播放器。
打包成jQuery插件
創建好控制按鈕后我們需要配合多媒體元素的API來實現視頻控制的目的,正如前面提到的一樣我們將我們的播放器打包成jQuery插件,這樣可以很好的實現復用,代碼如下:
Java代碼
$.fn.gVideo=function(options) {
// build main options before element iteration
var defaults={
theme: 'simpledark',
childtheme: ''
};
var options=$.extend(defaults, options);
// iterate and reformat each matched element
return this.each(function() {
var $gVideo=$(this);
//create html structure
//main wrapper
var $video_wrap=$('<div></div>').addClass('ghinda-video-player').addClass(options.theme).addClass(options.childtheme);
//controls wraper
var $video_controls=$('<div class="ghinda-video-controls"><a class="ghinda-video-play" title="Play/Pause"></a><div class="ghinda-video-seek"></div><div class="ghinda-video-timer">00:00</div><div class="ghinda-volume-box"><div class="ghinda-volume-slider"></div><a class="ghinda-volume-button" title="Mute/Unmute"></a></div></div>');
$gVideo.wrap($video_wrap);
$gVideo.after($video_controls);
這里先假設您了解jQuery并知道如何創建一個jQuery插件,因為這個不在本文的討論范圍之內,在上面這段腳本中我們使用jQuery動態創建視頻控制工具條的元素,接下來為了綁定事件我們需要獲取對應的元素:
Java代碼
//get newly created elements
var $video_container=$gVideo.parent('.ghinda-video-player');
var $video_controls=$('.ghinda-video-controls', $video_container);
var $ghinda_play_btn=$('.ghinda-video-play', $video_container);
var $ghinda_video_seek=$('.ghinda-video-seek', $video_container);
var $ghinda_video_timer=$('.ghinda-video-timer', $video_container);
var $ghinda_volume=$('.ghinda-volume-slider', $video_container);
var $ghinda_volume_btn=$('.ghinda-volume-button', $video_container);
$video_controls.hide(); // keep the controls hidden
這里我們通過className方式獲取,先讓工具條隱藏直到所有資源加載完成,現在來實現播放/暫停按鈕:
Java代碼
var gPlay=function() {
if($gVideo.attr('paused')==false) {
$gVideo[0].pause();
} else {
$gVideo[0].play();
}
};
$ghinda_play_btn.click(gPlay);
$gVideo.click(gPlay);
$gVideo.bind('play', function() {
$ghinda_play_btn.addClass('ghinda-paused-button');
});
$gVideo.bind('pause', function() {
$ghinda_play_btn.removeClass('ghinda-paused-button');
});
$gVideo.bind('ended', function() {
$ghinda_play_btn.removeClass('ghinda-paused-button');
});
大多數瀏覽器在右鍵點擊視頻時會提供一個獨立的菜單,它也提供了視頻控制功能,如果用戶通過這個右鍵菜單控制視頻那就會跟我們的自定義控件沖突,所以為了避免這一點我們需要綁定視頻播放器自身的“播放”,“暫停”和“結束”事件,在事件處理函數中處理播放/暫停按鈕,控制按鈕的樣式。
為了創建進度條的拖動塊,我們使用了jQuery UI的Slider組件:
Java代碼
var createSeek=function() {
if($gVideo.attr('readyState')) {
var video_duration=$gVideo.attr('duration');
$ghinda_video_seek.slider({
value: 0,
step: 0.01,
orientation: "horizontal",
range: "min",
max: video_duration,
animate: true,
slide: function(){
seeksliding=true;
},
stop:function(e,ui){
seeksliding=false;
$gVideo.attr("currentTime",ui.value);
}
});
$video_controls.show();
} else {
setTimeout(createSeek, 150);
}
};
createSeek();
正如你所看到的,這里我們寫了一個遞歸函數,通過循環比較video的readyState屬性來判斷視頻是否已經準備好,否則我們就不能獲得視頻的時長也無法創建滑動塊,當視頻準備好后我們初始化滑動塊并顯示控制工具條,下一步我們通過綁定video元素的timeupdate事件實現計時器功能:
Java代碼
var gTimeFormat=function(seconds){
var m=Math.floor(seconds/60)<10?"0"+Math.floor(seconds/60):Math.floor(seconds/60);
var s=Math.floor(seconds-(m*60))<10?"0"+Math.floor(seconds-(m*60)):Math.floor(seconds-(m*60));
return m+":"+s;
};
var seekUpdate=function() {
var currenttime=$gVideo.attr('currentTime');
if(!seeksliding) $ghinda_video_seek.slider('value', currenttime);
$ghinda_video_timer.text(gTimeFormat(currenttime));
};
$gVideo.bind('timeupdate', seekUpdate);
這里我們用seekUpdate函數獲取video的currentTime屬性值然后調用gTimeFormat函數進行格式化后得到當前播放的時間點。
至于音量控制控件我們還是利用jQuery UI的Slider組件然后利用自定義函數實現靜音和取消靜音的功能:
Java代碼
$ghinda_volume.slider({
value: 1,
orientation: "vertical",
range: "min",
max: 1,
step: 0.05,
animate: true,
slide:function(e,ui){
$gVideo.attr('muted',false);
video_volume=ui.value;
$gVideo.attr('volume',ui.value);
}
});
var muteVolume=function() {
if($gVideo.attr('muted')==true) {
$gVideo.attr('muted', false);
$ghinda_volume.slider('value', video_volume);
$ghinda_volume_btn.removeClass('ghinda-volume-mute');
} else {
$gVideo.attr('muted', true);
$ghinda_volume.slider('value', '0');
$ghinda_volume_btn.addClass('ghinda-volume-mute');
};
};
$ghinda_volume_btn.click(muteVolume);
最后當我們自己的自定義視頻控制工具條構造完成后需要移除<video>標簽的controls屬性,這樣瀏覽器默認的工具條就被去掉了。
好了,我們的插件功能已經全部完成了,調用方法:
Java代碼
$('video').gVideo();
這會將我們的插件應用到頁面上每一個video元素上。
外觀和體驗
好的,現在到了比較有意思的部分,也就是播放器的外觀和體驗了。當插件功能已經完成后利用一點CSS就可以很容易地自定義樣式了,我們將全部使用CSS3來實現。
首先,我們給播放器主容器加一些樣式:
Java代碼
.ghinda-video-player {
float: left;
padding: 10px;
border: 5px solid #61625d;
-moz-border-radius: 5px; /* FF1+ */
-ms-border-radius: 5px; /* IE future proofing */
-webkit-border-radius: 5px; /* Saf3+, Chrome */
border-radius: 5px; /* Opera 10.5, IE 9 */
background: #000000;
background-image: -moz-linear-gradient(top, #313131, #000000); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottombottom,color-stop(0, #313131),color-stop(1, #000000)); /* Saf4+, Chrome */
box-shadow: inset 0 15px 35px #535353;
}
下一步,我們設置視頻控制工具條左邊浮動使它們水平對齊,利用CSS3的opacity和transitions我們給播放/暫停和靜音/取消靜音按鈕添加了非常不錯的懸浮效果:
Java代碼
.ghinda-video-play {
display: block;
width: 22px;
height: 22px;
margin-right: 15px;
background: url(../images/play-icon.png) no-repeat;
opacity: 0.7;
-moz-transition: all 0.2s ease-in-out; /* Firefox */
-ms-transition: all 0.2s ease-in-out; /* IE future proofing */
-o-transition: all 0.2s ease-in-out; /* Opera */
-webkit-transition: all 0.2s ease-in-out; /* Safari and Chrome */
transition: all 0.2s ease-in-out;
}
.ghinda-paused-button {
background: url(../images/pause-icon.png) no-repeat;
}
.ghinda-video-play:hover {
opacity: 1;
}
如果您仔細看了前面那段根據視頻播放狀態(Playing/Paused)添加和移除播放/暫停按鈕樣式的JavaScript代碼,就會明白為什么.ghinda-paused-button為什么要重寫.ghinda-video-play的背景屬性了。
現在輪到滑動塊了,我們進度條和音量控制的滑動塊的實現都是利用了jQuery UI的Slider組件,這個組件它本身自帶了樣式,定義在jQuery UI對應的css文件中,但是為了使滑動塊和播放器其他控件外觀保持一致我們全部重寫了它的樣式:
Java代碼
.ghinda-video-seek .ui-slider-handle {
width: 15px;
height: 15px;
border: 1px solid #333;
top: -4px;
-moz-border-radius:10px;
-ms-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
background: #e6e6e6;
background-image: -moz-linear-gradient(top, #e6e6e6, #d5d5d5);
background-image: -webkit-gradient(linear,left top,left bottombottom,color-stop(0, #e6e6e6),color-stop(1, #d5d5d5));
box-shadow: inset 0 -3px 3px #d5d5d5;
}
.ghinda-video-seek .ui-slider-handle.ui-state-hover {
background: #fff;
}
.ghinda-video-seek .ui-slider-range {
-moz-border-radius:15px;
-ms-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
background: #4cbae8;
background-image: -moz-linear-gradient(top, #4cbae8, #39a2ce);
background-image: -webkit-gradient(linear,left top,left bottombottom,color-stop(0, #4cbae8),color-stop(1, #39a2ce));
box-shadow: inset 0 -3px 3px #39a2ce;
}
這時候音量控制的滑動塊一直顯示在音量按鈕旁邊,我們需要將它改成默認隱藏,當鼠標懸浮在音量按鈕上再動態顯示出來,使用transitions來實現這個效果會是個不錯的的選擇:
Java代碼
.ghinda-volume-box {
height: 30px;
-moz-transition: all 0.1s ease-in-out; /* Firefox */
-ms-transition: all 0.1s ease-in-out; /* IE future proofing */
-o-transition: all 0.2s ease-in-out; /* Opera */
-webkit-transition: all 0.1s ease-in-out; /* Safari and Chrome */
transition: all 0.1s ease-in-out;
}
.ghinda-volume-box:hover {
height: 135px;
padding-top: 5px;
}
.ghinda-volume-slider {
visibility: hidden;
opacity: 0;
-moz-transition: all 0.1s ease-in-out; /* Firefox */
-ms-transition: all 0.1s ease-in-out; /* IE future proofing */
-o-transition: all 0.1s ease-in-out; /* Opera */
-webkit-transition: all 0.1s ease-in-out; /* Safari and Chrome */
transition: all 0.1s ease-in-out;
}
.ghinda-volume-box:hover .ghinda-volume-slider {
position: relative;
visibility: visible;
opacity: 1;
}
利用一些基礎的CSS屬性以及CSS3提供的新屬性我們打造了一個全新的播放器外觀,它看起來是這個樣子:
自定義皮膚
可能您已經注意到,我們在編寫插件的時候已經定義了一些默認選項,它們是theme和childtheme,可以在調用插件的時候根據需要方便的應用自定義皮膚。
這里解釋下theme就是所有控件的一整套樣式定義,childtheme就是在theme基礎上重寫某些樣式,我們在調用插件的時候可以同時指定這兩個選項或者其中的一個:
Java代碼
$('video').gVideo({
childtheme:'smalldark'
});
我們寫了一個示例的皮膚smalldark,它只重寫了部分的樣式,顯示效果是這樣的:
總結
利用HTML5 video,JavaScript和CSS3打造自定義的視頻播放器真的非常容易,t實現工具條功能用JavaScrip,外觀和體驗交給CSS3,我們得到了一個功能強大并且易于定制的解決方案!
enjoy!
2)mui Html5 Video 實現方案
前言: 最近項目中需要用到html5 視頻播放功能,于是稍微研究了解了下,遇到了很多坑,特此記錄下.
一、 Html5 Video
參考來源: http://www.xuanfengge.com/html5-video-play.html
(這篇博文確實幫助很大)
1.1、 目的
將Html5 Video功能應用到實際項目中,針對不同的平臺和環境,進行個性化處理。
基本只考慮webkit瀏覽器兼容問題
1.2、 Html5 Video支持格式
只支持: .mp4后綴(.h264編碼格式),和.webm后綴(專用web視頻格式),以及.ogg后綴(音頻文件)
注意: Html5 Video 可以添加多個source源來進行兼容適配,這樣,當第一個源讀取出問題時會自動讀取下一個源. 比如可以同時在前面加上.webm和.mp4源,這樣一個出錯時會自動讀取另一個可用源(因為不同瀏覽器,支持的格式是不一樣的)
但是,Hybird模式的 Android 下,有些機型只能讀取第一個source來源(測試華為和聯想都是),所以也就是說在這種情況下,要確保第一個source源是正確的
各大瀏覽器兼容如圖所示:
見圖1
1.3、 不同平臺環境和對應實現方案
說明: 這里分為兩大塊,普通瀏覽器環境(pc和手機,主要是移動端,pc不做特別處理)和Hybird模式的APP環境(Android和iOS).
注: Html5 video可以播放本地視頻或者網絡視頻
1.3.1、 普通瀏覽器環境
*用Html5 Video 自帶的播放欄控件
*用 Video 視頻統一處理方法處理后,點擊圖片手動隱藏圖片,設置視頻大小,手動播放視頻.
注: 播放效果則由各大瀏覽器自行實現
手機端瀏覽器實現的不同效果,比如:
QQ瀏覽器(包括QQ客戶端內置的瀏覽器):播放時會自動進入全屏
華為自帶瀏覽器: 正常小窗口播放
1.3.2、 Hybird App環境
說明: 內聯播放是指直接在video標簽中播放視頻,沒有必要進入全屏
1.3.2.1、 Android內聯播放
*用Html5 Video 自帶的播放欄控件
*用 Video 視頻統一處理方法處理后,點擊圖片手動隱藏圖片,設置視頻大小,手動播放視頻.
*Android內聯播放需要注意,必須開啟硬件加速,由于有些Android手機 webview是默認關閉硬件加速的,所以必須在創建這個帶視頻播放的webview時手動添加 硬件加速屬性才行.(詳情見plus創建webview的style)
style.hardwareAccelerated=true;
1.3.2.2、 iOS內聯播放
*用Html5 Video 自帶的播放欄控件
*用 Video 視頻統一處理方法處理后,點擊圖片手動隱藏圖片,設置視頻大小,手動播放視頻.
*內聯播放注意要點,由于iOS下默認是全屏播放的,所以需要經過設置才能正常內聯播放
第一步:在項目的manifest里面配置允許webview內聯播放
"plus": { "splashscreen": { "autoclose": true,/*是否自動關閉程序啟動界面,true表示應用加載應用入口頁面后自動關閉;false則需調plus.navigator.closeSplashscreen()關閉*/ "waiting": true/*是否在程序啟動界面顯示等待雪花,true表示顯示,false表示不顯示。*/ }, "allowsInlineMediaPlayback": true,/*設置ios下允許內聯播放*/ "popGesture": "close"
第二步: 創建video標簽時,手動加上內聯播放的屬性(iOS不支持preload)
<!-- 讓ios支持內聯播放,必須添加 webkit-playsinline 標簽 --> <video webkit-playsinline id="videoMedia" controls="controls" preload>
這樣iOS手機在播放的時候才會采用內聯播放
1.3.2.3、 Android非內聯播放
*通過NJS使用原生播放器來播放視頻,傳入的url可以是本地的或網絡的地址
*用 Video 視頻統一處理方法處理后,點擊圖片之后,圖片保持不變(所以沒有必要隱藏圖片),直接獲取視頻的資源地址,傳給原生播放器播放
注: 這種模式下,性能要比直接html5自帶播放器播放高
1.3.2.4、 iOS非內聯播放
*用Html5 Video 自帶的播放欄控件(非內聯播放需要去除特定內聯屬性”webkit-playsinline”,這樣才能全屏播放)
if(!isInlinePlay){ //如果是非內斂,ios需要去除內聯樣式 mediaTarget.removeAttribute('webkit-playsinline'); }
*用 Video 視頻統一處理方法處理后,點擊圖片之后,圖片保持不變(所以沒有必要隱藏圖片),直接調用video.play()播放視頻(這時候會用一個全屏播放器來播放視頻)
1.3.3、 注意要點
如果采用NJS通過Android原生播放器播放視頻,目前無法監聽到視頻的一些自定義事件.(如下載中,播放完畢,暫停,播放時間等)
而如果采用Html5 Video自帶播放,這些是可以通過腳本控制的.
所以選定方案時需要進行衡量
*另外,在Html5 Video播放時,無法監聽到規定的結束事件seeked,只能在timeUpdate里面判斷,如果ended為true就代表結束了.
*在NJS通過Android原生播放器播放時,可以通過document監聽resume和pause事件判斷是否進入播放和退出播放
1.4、 Tips
1.4.1、 關于Video 視頻統一處理的方案
說明: 由于將一個<Video>直接顯示在頁面中,會有各種五花八門的播放器效果,如圖:
(這里引用了參考來源的圖)
見圖2
顯然,體驗效果并不好,所以現在的做法是用一張模擬播放的圖片來替代<Video>所在的地方,而將Video元素設置為1*1像素大小.然后給圖片設置點擊監聽,監聽到點擊時,播放視頻.
注意:
*這里不要用{display: none}或者{width:0;height:0;}的方式,因為這樣視頻元素會處于未激活的狀態,給后續的處理帶來麻煩.
*這里沒有考慮ios<6和一些低版本的Android的兼容性問題了(這些版本里,無法直接通過video.play()來播放),因為項目環境基本上要求Android>4.0 iOS 7.0以上的.
*關于點擊圖片播放視頻后,如果是內聯播放模式下(或者是普通瀏覽器),就應該將圖片隱藏,然后將視頻大小設置為本來的大小(一般為圖片大小);如果是非內聯播放模式(全屏模式),就沒有必要隱藏圖片了,因為iOS下會自動打開一個全屏播放器來播放視頻,Android下考慮到Html5 video較卡,所以也會通過NJS使用原生播放器來全屏播放視頻.
1.4.2、 Android NJS播放視屏的實現代碼
說明: 這個是Dcloud論壇中有人分享的
//非內聯模式下的plus下的android才用到 var Intent=plus.android.importClass("android.content.Intent"); var Uri=plus.android.importClass("android.net.Uri"); var main=plus.android.runtimeMainActivity(); var intent=new Intent(Intent.ACTION_VIEW); var uri=Uri.parse(url); intent.setDataAndType(uri, "video/*"); main.startActivity(intent);
1.4.3、 如何讀取元素的寬高
*在獲取視頻的寬度時,發現用 video.style.width無法獲取到寬度.
后來查了資料,發現dom.style.width(height)只能獲取在stye直接賦予的值.而如果是通過css樣式表賦予的值是無法直接獲取的,只能通過dom.offsetWidth(offsetHeight)獲取.
*設置元素寬和高是不要直接在style里設置,而是最好通過css樣式表賦予
*讀取元素寬和高時,用offsetWidth(offsetHeight)
1.4.4、 關于全屏播放的問題
在PC端webkit瀏覽器下,全屏代碼如下:
進入全屏: videoContainer(對應的dom).webkitRequestFullscreen();
退出全屏: document.webkitCancelFullScreen();
*但是經測試,在手機瀏覽器和Hybird模式下的手機環境中都無法使用,
應該是手機瀏覽器中video 播放器的全屏模式和pc端的有區別,已經脫離了webkit的全屏組件,而是用原生自己實現的.
1.5、 遇到問題及解決方法
1.5.1、 Video.currentTime 設置值時設置無效,或者變為0
原因分析:
與測試的服務器和端口有關,測試環境是放在hbuild本地瀏覽器的,沒有處理好視頻快進問題,所以會導致每次快進后,視頻都會重置-在某些測試服務器上,則出現快進無效,但不會重置
解決方法:
將網頁用其它正式服務器打開均可正常,如tomcat,wampserver,甚至直接在本地打開也行.
1.5.2、 無法通過代碼Video.src獲取資源路徑
原因分析:
本實例中,Video是通過source添加src的,無法直接讀取video的src
解決方法:
可以通過讀取到第一個source的標簽,再獲取source的src
注:本來這個方法有一個缺點就是有可能第一個source的src不可用.但是由于Android中第一個source必須有用才行.否則無法正常播放.所以在確保第一個source正確的情況下能這樣用.
1.5.3、 部分Android機型無法退出全屏
描述:
在使用Html5 Video自帶播放器播放時,部分Android機型(如聯想K860點擊全屏按鈕進入全屏后,無法退出全屏-因為進入全屏后,全屏按鈕不見了)
原因分析: 可能是手機廠商擅自劫持了瀏覽器或者篡改了瀏覽器實現方式
解決方法:
目前無法解決,在這類機型中,建議直接采用非內聯模式播放或者是盡量不要手動進入全屏
3)移動端HTML5<video>視頻播放優化實踐
遇到的挑戰
移動端HTML5使用原生<video>標簽播放視頻,要做到兩個基本原則,速度快和體驗佳,先來分析一下這兩個問題。
下載速度
以一個8s短視頻為例,wifi環境下提供的高清視頻達到1000kbps,文件大小大約1MB;非wifi環境下提供的低碼率視頻是500kbps左右,文件大小大約500KB;參考QzoneTouch多普勒測速,2g網絡的平均速度是14KB/s,那么下載一個低碼率視頻耗時35s;那么要想流暢播放視頻,就需要一個加載等待的過程,這個過程要有明確的反饋,不能讓用戶有“壞掉了”的感覺。
多普勒測速數據參考
# | dns(s) | conn(s) | rtt(s) | tran(kb/s) |
---|---|---|---|---|
2g | 3.85785 | 2.33482 | 2.57478 | 14.0374 |
3g | 1.60643 | 0.743109 | 0.608047 | 60.1967 |
wifi | 0.986921 | 0.550208 | 0.444332 | 70.8728 |
用戶體驗
視頻是否可以自動播放,是否能循環播放,是否能顯示下載進度,播放的時候如何隱藏控制條,暫停的時候又能顯示出來呢。這些問題看上去貌似簡單,但是由于PC/iOS/Android這些不同平臺、不同的瀏覽器內核、甚至相同內核的不同版本,所實現的<video>屬性、方法和事件差異較大,解決兼容性問題又給開發造成了很大困擾。
分析原因
事件差異
下面是播放一個短視頻,在不同平臺觸發事件和獲取屬性的差異表現。
PC
# | event | readyState | currentTime (s) | buffered (s) | duration (s) | 視頻狀態 |
---|---|---|---|---|---|---|
1 | loadstart | NOTHING | 0 | – | – | – |
2 | suspend | NOTHING | 0 | – | – | – |
3 | play | NOTHING | 0 | – | – | – |
4 | waiting | NOTHING | 0 | – | – | – |
5 | durationchange | METADATA | 0 | 5.35 | 7.91 | 獲取到視頻長度 |
6 | loadedmetadata | METADATA | 0 | 0.66 | 7.91 | 獲取到元數據 |
7 | loadeddata | ENOUGHDATA | 0 | 0.66 | 7.91 | – |
8 | canplay | ENOUGH_DATA | 0 | 0.66 | 7.91 | – |
9 | playing | ENOUGH_DATA | 0 | 0.66 | 7.91 | 開始播放 |
10 | canplaythrough | ENOUGH_DATA | 0 | 0.66 | 7.91 | 可以流暢播放 |
11 | progress | ENOUGH_DATA | 0.11 | 3.68 | 7.91 | 持續下載 |
12 | timeupdate | ENOUGH_DATA | 0.14 | 4.44 | 7.91 | 播放進度變化 |
… | … | … | … | … | … | … |
23 | progress | ENOUGH_DATA | 1.77 | 7.91 | 7.91 | 下載完畢 |
24 | suspend | ENOUGH_DATA | 1.77 | 7.91 | 7.91 | – |
25 | timeupdate | ENOUGH_DATA | 1.9 | 7.91 | 7.91 | 繼續播放中 |
… | … | … | … | … | … | … |
48 | timeupdate | ENOUGH_DATA | 7.7 | 7.91 | 7.91 | – |
49 | timeupdate | ENOUGH_DATA | 0 | 7.91 | 7.91 | – |
50 | seeking | METADATA | 0 | 7.91 | 7.91 | – |
51 | waiting | METADATA | 0 | 7.91 | 7.91 | – |
52 | timeupdate | ENOUGH_DATA | 0 | 7.91 | 7.91 | – |
53 | seeked | ENOUGH_DATA | 0 | 7.91 | 7.91 | 播放完畢進度回到起點 |
54 | canplay | ENOUGH_DATA | 0 | 7.91 | 7.91 | – |
55 | playing | ENOUGH_DATA | 0 | 7.91 | 7.91 | 循環播放 |
56 | canplaythrough | ENOUGH_DATA | 0 | 7.91 | 7.91 | – |
57 | timeupdate | ENOUGH_DATA | 0.19 | 7.91 | 7.91 | – |
… | … | … | … | … | … | … |
iOS
# | event | readyState | currentTime (s) | buffered (s) | duration (s) | 視頻狀態 |
---|---|---|---|---|---|---|
1 | loadstart | NOTHING | 0 | – | – | – |
2 | play | NOTHING | 0 | – | – | – |
3 | waiting | NOTHING | 0 | – | – | – |
4 | durationchange | METADATA | 0 | – | 7.91 | 獲取到視頻長度 |
5 | loadedmetadata | METADATA | 0 | – | 7.91 | 獲取到元數據 |
6 | loadeddata | ENOUGHDATA | 0 | – | 7.91 | – |
7 | canplay | ENOUGH_DATA | 0 | 7.91 | 7.91 | – |
8 | canplaythrough | ENOUGH_DATA | 0 | 7.91 | 7.91 | 可以流暢播放 |
9 | playing | ENOUGH_DATA | 0 | 7.91 | 7.91 | 開始播放 |
10 | progress | ENOUGH_DATA | 0 | 7.91 | 7.91 | 下載完畢 |
11 | suspend | ENOUGH_DATA | 0 | 7.91 | 7.91 | – |
12 | timeupdate | ENOUGH_DATA | 0.02 | 7.91 | 7.91 | 播放進度變化 |
… | … | … | … | … | … | … |
43 | timeupdate | ENOUGH_DATA | 7.8 | 7.91 | 7.91 | – |
44 | timeupdate | ENOUGH_DATA | 0 | 7.91 | 7.91 | – |
45 | seeked | ENOUGH_DATA | 0 | 7.91 | 7.91 | 播放完畢進度回到起點 |
46 | timeupdate | ENOUGH_DATA | 0.22 | 7.91 | 7.91 | 循環播放 |
… | … | … | … | … | … | … |
Android
# | event | readyState | currentTime (s) | buffered (s) | duration (s) | 視頻狀態 |
---|---|---|---|---|---|---|
1 | loadstart | NOTHING | 0 | – | – | – |
2 | play | NOTHING | 0 | – | – | – |
3 | waiting | NOTHING | 0 | 0 | – | – |
4 | durationchange | ENOUGH_DATA | 0 | 0 | 0 | – |
5 | durationchange | ENOUGH_DATA | 0 | 0 | 7.91 | 獲取到視頻長度 |
6 | loadedmetadata | ENOUGH_DATA | 0 | 0 | 7.91 | 獲取到元數據 |
7 | loadeddata | ENOUGHDATA | 0 | 0 | 7.91 | – |
8 | canplay | ENOUGH_DATA | 0 | 0 | 7.91 | – |
9 | canplaythrough | ENOUGH_DATA | 0 | 0 | 7.91 | – |
10 | playing | ENOUGH_DATA | 0 | 0 | 7.91 | – |
11 | timeupdate | ENOUGH_DATA | 0 | 0 | 7.91 | – |
12 | progress | ENOUGH_DATA | 0 | 3.57 | 7.91 | 下載中 |
13 | timeupdate | ENOUGH_DATA | 0.2 | 6.89 | 7.91 | 開始播放 |
14 | progress | ENOUGH_DATA | 0 | 7.91 | 7.91 | 下載完畢 |
… | … | … | … | … | … | … |
49 | timeupdate | ENOUGH_DATA | 7.79 | 7.91 | 7.91 | – |
50 | progress | ENOUGH_DATA | 7.87 | 7.91 | 7.91 | – |
51 | timeupdate | ENOUGH_DATA | 0 | 7.91 | 7.91 | – |
52 | seeking | ENOUGH_DATA | 0 | 7.91 | 7.91 | 播放完畢進度回到起點 |
53 | timeupdate | ENOUGH_DATA | 0 | 7.91 | 7.91 | – |
54 | seeked | ENOUGH_DATA | 0 | 7.91 | 7.91 | 循環播放失敗卡住了 |
55 | progress | ENOUGH_DATA | 0 | 7.91 | 7.91 | – |
56 | stalled | ENOUGH_DATA | 0 | 7.91 | 7.91 | – |
一些常用且需要重點關注的<video>事件
event | iOS | Android |
---|---|---|
****************** | *********************************************** | *********************************************** |
play | 只是要播放視頻,響應的是video.play()方法,并不代表已經開始播放 | 和iOS一樣,僅是響應video.play()方法 |
durationchange | 會執行一次,一定會獲取到視頻的duration | 可能會執行多次,只有最后一次才能獲取到真實的duration,前面的duration都是0;但低版本Android可能獲取到的duration是0或1;(本文提到的低版本Android大部分是4.1以下) |
canplay | 可以認為是視頻元素沒有問題,可以運行,沒有更多含義了,基本用不上 | 同iOS |
canplaythrough | 會有明確的緩沖,表示可以流暢播放了; | 沒有什么用,視頻仍然會卡住,數據可能還沒有開始加載; |
playing | 明確表示播放開始了; | 依然沒有用,視頻可能并沒有開始播放; |
progress | 有明確的下載,可以獲取到當前的buffer,并且全部下載完畢后不在觸發; | 不一定有明確的數據下載,并且全部下載完畢后依然繼續觸發; |
timeupdate | 會有明確的進度變化,可以獲取到currentTime; | 進度不一定變化,currentTime可能總是0,但是第一次有currentTime變化的timeupdate事件一定代表了視頻開始播放了; |
error | iOS中會有明確的錯誤拋出; | Android中某些瀏覽器會莫名其妙的拋出error; |
stalled | 網絡狀況不佳,導致視頻下載中斷; | 在沒有play之前,也可能會拋出該事件。 |
屬性差異
attributes | iOS | android |
---|---|---|
****************** | *********************************************** | *********************************************** |
poster 封面圖片 | 支持,但是加載速度明顯比在<img>中要慢; | 不一定支持(瀏覽器廠商的實現標準不統一); |
preload 預加載 | iPhone不支持; | 可能支持; |
autoplay 自動播放 | iPhone Safari中不支持,但在webview中可能被開啟;iOS開發文檔明確說明蜂窩網絡下不允許autoplay; | 可能支持; |
loop 循環播放 | 支持 | 可能支持; |
controls 控制條 | 支持,但是需要開始播放了才顯示 | 基本都支持顯示或者不顯示 |
width和height | 一定給出明確的屬性設置,切不能為0; | 如果不設置,僅僅通過CSS樣式去控制視頻大小,可能會導致標簽失效。 |
其他怪異bug和不友好表現
iOS | android |
---|---|
********************************************************* | ********************************************************* |
物理位置覆蓋在<video>區域上的元素,click和touch等事件會失效,比如一個<a>鏈接如果覆蓋在<video>上,那么點擊后沒有任何效果。 | – |
iOS8.0+中,單頁面播放視頻超過16個,再播放的視頻全部MediaError解碼異常無法播放。 | – |
iPhone的Safari會彈出一個全屏的播放器來播放視頻,iPad則支持內聯播放。iOS7+ 如果webview(比如微信)開啟了webview.allowsInlineMediaPlayback=YES; ,可以通過設置webkit-playsinline 屬性支持內聯播放; | 支持內聯播放,但某些廠商會用自己的播放器劫持原生的視頻播放; |
下載視頻時,會先發送一個2字節的請求來獲取視頻元數據(比如時長),然后再不斷的發送分包續傳(206)請求來下載視頻,抓包顯示請求數和請求量至少有一倍的冗余(x2),這個嚴重的bug在iOS8中有明顯的修復,但是分包的206請求仍然會有冗余數據的下載,浪費了流量。 | 比iOS的處理方式好,沒有第一個2字節請求,沒有流量損耗; |
– | 低版本Android(<=4.0.4)中,<video>如果在有相對和決定定位的層中,可能會導致整個頁面錯位。 |
– | 某些瀏覽器廠商會劫持<video>,用其“自己”的播放器來播放視頻,“破壞”了產品本身的播放體驗,那么只能case by case的解決了。 |
加載視頻時沒有進度提示,視覺上看不出是播放完了還是卡住了; | 加載視頻時,大都會顯示一個自帶的loading UI(菊花)。 |
最佳實踐
視頻初始化
如果將一個<video>直接顯示在頁面中,那么就會看到各種五花八門的播放器初始效果;
這顯然不是一個好的視覺體驗,那么通常的做法是制作一個模擬的視頻播放視圖,比如一個封面加一個播放按鈕。
而真實的<video>視頻元素要隱藏起來,如何隱藏呢?最好不要用{display: none}
或者{width:0;height:0;}
的方式,因為這樣視頻元素會處于未激活的狀態,給后續的處理帶來麻煩。最佳的方式是將視頻設置成1×1像素大小,放在視覺邊緣的位置。
1 2 3 4 5 | <!--iOS--> <video webkit-playsinline width="1"height="1"class="vplayinside notaplink"x-webkit-airplay controls loop="loop"src="<%=src%>"></video> <!--Android--> <video width="1"height="1"controls loop="loop"src="<%=src%>"></video> |
自動播放
autoplay的支持依賴內核和網絡狀況,比如iPhone在蜂窩網絡下明確禁用了autoplay;
經過試驗,在沒有明確的用戶操作的情況下,直接通過video.play()
也是無法激活播放的;
并且在產品設計上,自動播放也不是一個舒服的用戶體驗,所以產品設計上盡量避免使用自動播放。
點擊播放
之前提到,視頻最好通過1px大小隱藏起來,那么這時如何觸發播放呢?
經過試驗,當在明確的用戶操作(touch、click)時,通過這些用戶行為事件的回調函數,用video.play()
是可以觸發視頻播放的,那么能否在用戶操作后,再去同步的創建和播放視頻呢?答案是肯定的,這無疑是一個視頻元素初始化的最佳實踐,但是有些差異需要注意。
iOS6+
可以在用戶的touch時間中動態創建并播放視頻。
iOS < 6
可以在用戶的touch時間中動態創建視頻,但不能播放;要再追加一個click事件來啟動播放;也就是說,給偽造的視頻播放按鈕同時綁定tap和click事件,在tap的時候創建,在之后300毫秒的click中去播放。
Android
大部分高版本Android可以像iOS6+那樣去處理,但是低版本的不行,必須要通過click事件去傳遞video.play()
,為了保持兼容,最好是用幫tap和click兩個事件來分別完成視頻的初始化和播放。
我們還發現,有些低版本Android中,無法通過video.play()
來播放視頻,必須有真實的用戶點擊視頻元素才能播放;這種情況,有一個技巧就是在tap的時候初始化并放大視頻覆蓋在播放視圖中,讓300毫秒后的真實點擊行為穿透點擊在視頻元素上來實現播放。
循環播放
如果視頻需要循環播放,那么就增加loop
屬性,是否能循環播放就看瀏覽器是否支持了,因為還沒有找到hack技巧來強制循環播放;
即使,在不支持循環播放的Android中,通過監聽seeked
事件知道了播放進度到了終點或起點暫停了,此時也無法通過video.play()
來讓視頻重新播放。
監控下載進度
如何獲取視頻時長和已經下載的時長?
1 2 3 4 5 6 7 8 9 10 11 12 13 | // 視頻時長 varduration=video.duration // 獲取視頻已經下載的時長 functiongetEnd(video){ varend=0 try{ end=video.buffered.end(0)||0 end=parseInt(end*1000+1)/1000 }catch(e){ } returnend } |
progress事件表示視頻在加載,但是它的觸發頻率和時機并不規律,最佳做法是通過一個定時器去實時獲取end,當end >=duration時,表示已經下載完畢,再終止定時器。
1 2 3 4 5 6 7 8 9 10 | vartimer=setInterval(function(){ varend=getEnd(video), duration=video.duration if(end<duration){ return } clearInterval(timer) },1000) |
全部下載后再播放
假設播放短視頻,如果網絡不佳,會造成播放斷斷續續,在iOS中這種停頓還沒有一個明確的等待提示,這不是一個好的體驗,那么是否可以將視頻全部下載完畢再播放呢?
在iOS中,可以在視頻剛開始下載的時候馬上暫停,此時下載還將繼續,可以做一個loading的菊花告知視頻正在加載,然后等到視頻全部下載完再開始播放。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | $(video).one('loadeddata',function(){ // 暫停,但下載還在繼續 video.pause() // 啟動定時器檢測視頻下載進度 vartimer=setInterval(function(){ varend=getEnd(video), duration=video.duration if(end<duration){ return } varwidth=$(video).parent().width() // 下載完了,開始播放吧 $(video).attr{ width:width, height:width } video.play() clearInterval(timer) },1000) }) |
緩沖播放——邊下邊播時,選擇開始播放的最佳時間點
當視頻越來越長或者網絡慢時,等待視頻全部下載完再播放也不是好的體驗,最好能邊下邊播,緩沖到流暢狀態就開始播放,那什么時候播放才是最佳時間點呢?
在iOS中,canplaythrough事件就是這個最佳時間點,它是通過動態計算緩沖量和下載速度得出的視頻可以流暢播放的狀態反饋。
canplaythrough event: The user agent estimates that if playback were to be started now, the media resource could be rendered at the current playback rate all the way to its end without having to stop for further buffering.
注意:下載完再播放和緩沖播放只適用于iOS。
統計播放時間和播放次數
要統計實際的播放時間,要累加timeupdate事件變化的時間,再減去中間可能暫停的時間。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | $video.on('playing',function(){ // 開始播放是打點 $video.attr('data-updateTime',+newDate()) }) $video.on('pause',function(){ // 暫停播放時清除打點 $video.removeAttr('data-updateTime') }) // 累加播放時間 $video.on('timeupdate',function(event){ var$video=$(event.target), updateTime=parseInt($video.attr('data-updateTime')||0), playingTime=parseInt($video.attr('data-playingTime')||0), times=parseInt($video.attr('data-times')||0), newtimes=0, video=$video.get(0), duration=parseFloat($video.attr('data-duration')||0), now=+newDate() // 播放時間 playingTime=playingTime+now-updateTime // 播放次數 newtimes=Math.ceil(playingTime/1000/duration) $video.attr('data-playingTime',playingTime) $video.attr('data-updateTime',now) }) |
異常處理
對error事件做詳細的上報;
對stalled事件做統計上報,并提示用戶網絡慢等。
參考數據
微視觸屏版iOS視頻測速
網絡環境 | 視頻碼率 | 獲取到視頻時長 時間點(s) | 開始流暢播放 時間點(s) | 全部下載完畢 時間點(s) | 視頻長度(s) |
---|---|---|---|---|---|
wifi | 1000kbps | 2.86 | 3.97 | 5.85 | 8.69 |
非wifi | 500kbps | 4.56 | 8 | 10.62 | 8.67 |
搬好凳子看HTML
首先我們在HB下創建一個新的app項目,名稱為 欠債
新建一個video.html
webkit-playsinline : 在ios中,加入此屬性,可以關閉自動全屏播放
object-fit:fill : 視頻充滿video容器的大小
詳細理由請看參考文獻2or3
在此我們向項目里放置一個mp4格式的視頻,視頻內容不限,可以是小動畫,也可以是
ps:要在meta中加上,否則視頻會擴充變形哦
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
OK,現在布局已經完成,一個視頻已經在頁面中了
旁白:尼瑪,點了沒反應,那這怎么播放?
樓主:你們這群家伙看別的小視頻等個1小時都行。。。
旁白:一個簡單的播放器,至少要有 暫停/播放,進度條,視頻時長,全屏等控件吧
樓主:來來來,不要急,先來個播放按鈕寫在video標簽后面
<div class="bad-video"> <video class="" webkit-playsinline style="object-fit:fill;"> <source src='xx.mp4' type="video/mp4"></source> <p>設備不支持</p> <video> <img src="img/play.png"/> </div>
寫好樣式、
.bad-video { position: relative; overflow: hidden; background-color: #CCCCCC; } .bad-video .vplay{ position: absolute; width: 15%; z-index: 99; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
樓主:當當當
再在后面加一個控制條
<img src="img/play.png" class="vplay" /> <div class="controls"> <div> <div class="progressBar"> <div class="timeBar"></div> </div> </div> <div><span class="current">00:00</span>/<span class="duration">00:00</span></div> <div><span class="fill">全屏</span></div> </div>
.bad-video .controls { width: 100%; height: 2rem; line-height: 2rem; font-size: 0.8rem; color: white; display: block; position: absolute; bottom: 0; background-color: rgba(0, 0, 0, .55); display: -webkit-flex; display: flex; }.bad-video .controls>* { flex: 1; }.bad-video .controls>*:nth-child(1) { flex: 6; }.bad-video .controls>*:nth-child(2) { flex: 2; text-align: center; }.bad-video .controls .progressBar { margin: .75rem 5%; position: relative; width: 90%; height: .5rem; background-color: rgba(200, 200, 200, .55); border-radius: 10px; }.bad-video .controls .timeBar { position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: rgba(99, 110, 225, .85); border-radius: 10px; }
總算有個看起來像樣的了
旁白:樓主,可是還是不能播放啊
樓主:叫你別急,要不你先去擼一把,我寫好了文字@你
旁白:好啊,早說嘛,我先走了,記得@我
樓主:你走,省的我精神分裂碼兩個人的字
好,現在Html元素已經基本上弄好啦,看起來不是那么low了
*請認真填寫需求信息,我們會在24小時內與您取得聯系。