前言
眾所周知,16年無疑是直播行業(yè)的春天,同時也是H5的一次高潮。
so,到現(xiàn)在用H5技術(shù)在移動端做網(wǎng)頁直播也是見怪不怪了,但是!!!
今天我們的主角是webApp下播放視頻
參考文獻(xiàn):
1)HTML5+CSS3+JQuery打造自定義視頻播放器
2)mui Html5 Video 實(shí)現(xiàn)方案
3)移動端HTML5
首先我們在HB下創(chuàng)建一個新的app項(xiàng)目,名稱為 欠債
新建一個video.html
webkit-playsinline : 在ios中,加入此屬性,可以關(guān)閉自動全屏播放
object-fit:fill : 視頻充滿video容器的大小
詳細(xì)理由請看參考文獻(xiàn)2or3
在此我們向項(xiàng)目里放置一個mp4格式的視頻,視頻內(nèi)容不限,可以是小動畫,也可以是
ps:要在meta中加上,否則視頻會擴(kuò)充變形哦
</>復(fù)制代碼
OK,現(xiàn)在布局已經(jīng)完成,一個視頻已經(jīng)在頁面中了
旁白:尼瑪,點(diǎn)了沒反應(yīng),那這怎么播放?
樓主:你們這群家伙看別的小視頻等個1小時都行。。。
旁白:一個簡單的播放器,至少要有 暫停/播放,進(jìn)度條,視頻時長,全屏等控件吧
樓主:來來來,不要急,先來個播放按鈕寫在video標(biāo)簽后面
</>復(fù)制代碼
設(shè)備不支持
寫好樣式、
</>復(fù)制代碼
.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%);
}
樓主:當(dāng)當(dāng)當(dāng)
再在后面加一個控制條
</>復(fù)制代碼
00:00/00:00
全屏
</>復(fù)制代碼
.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;
}
總算有個看起來像樣的了
旁白:樓主,可是還是不能播放啊
樓主:叫你別急,要不你先去擼一把,我寫好了文字@你
旁白:好啊,早說嘛,我先走了,記得@我
樓主:你走,省的我精神分裂碼兩個人的字
好,現(xiàn)在Html元素已經(jīng)基本上弄好啦,看起來不是那么low了
H5打造屬于自己的視頻播放器(邏輯篇)
H5打造屬于自己的視頻播放器(JS篇1)
H5打造屬于自己的視頻播放器(JS篇2)
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/87843.html
前言 眾所周知,16年無疑是直播行業(yè)的春天,同時也是H5的一次高潮。so,到現(xiàn)在用H5技術(shù)在移動端做網(wǎng)頁直播也是見怪不怪了,但是!!!今天我們的主角是webApp下播放視頻參考文獻(xiàn):1)HTML5+CSS3+JQuery打造自定義視頻播放器2)mui Html5 Video 實(shí)現(xiàn)方案3)移動端HTML5視頻播放優(yōu)化實(shí)踐 搬好凳子看HTML 首先我們在HB下創(chuàng)建一個新的app項(xiàng)目,名稱為 欠債 sh...
前言 眾所周知,16年無疑是直播行業(yè)的春天,同時也是H5的一次高潮。so,到現(xiàn)在用H5技術(shù)在移動端做網(wǎng)頁直播也是見怪不怪了,但是!!!今天我們的主角是webApp下播放視頻參考文獻(xiàn):1)HTML5+CSS3+JQuery打造自定義視頻播放器2)mui Html5 Video 實(shí)現(xiàn)方案3)移動端HTML5視頻播放優(yōu)化實(shí)踐 搬好凳子看HTML 首先我們在HB下創(chuàng)建一個新的app項(xiàng)目,名稱為 欠債 sh...
摘要:回顧打造屬于自己的視頻播放器篇在上一章節(jié)之中,已經(jīng)把篇給大致樣式顯現(xiàn)了出來,接下來應(yīng)該是篇了,可是在寫之前有必要先整理一下思緒,盲目亂寫是不對的,喝杯茶,撩撩妹,生活多美妙,寫起代碼來自然心情好思路正。 回顧 H5打造屬于自己的視頻播放器(HTML篇)在上一章節(jié)之中,已經(jīng)把HTML篇給大致樣式顯現(xiàn)了出來,接下來應(yīng)該是JS篇了,可是在寫之前有必要先整理一下思緒,盲目亂寫是不對的,喝杯茶,...
摘要:回顧打造屬于自己的視頻播放器篇在上一章節(jié)之中,已經(jīng)把篇給大致樣式顯現(xiàn)了出來,接下來應(yīng)該是篇了,可是在寫之前有必要先整理一下思緒,盲目亂寫是不對的,喝杯茶,撩撩妹,生活多美妙,寫起代碼來自然心情好思路正。 回顧 H5打造屬于自己的視頻播放器(HTML篇)在上一章節(jié)之中,已經(jīng)把HTML篇給大致樣式顯現(xiàn)了出來,接下來應(yīng)該是JS篇了,可是在寫之前有必要先整理一下思緒,盲目亂寫是不對的,喝杯茶,...
閱讀 1979·2021-11-23 09:51
閱讀 889·2021-11-19 09:40
閱讀 839·2021-10-27 14:20
閱讀 5034·2021-10-09 09:52
閱讀 3311·2021-10-09 09:44
閱讀 1740·2021-10-08 10:05
閱讀 5109·2021-09-09 11:47
閱讀 3490·2019-08-30 12:47