国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

H5打造屬于自己的視頻播放器(HTML篇)

Astrian / 1360人閱讀

前言

眾所周知,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

搬好凳子看HTML

首先我們在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ù)制代碼

  1. 設(shè)備不支持

寫好樣式、

</>復(fù)制代碼

  1. .bad-video {
  2. position: relative;
  3. overflow: hidden;
  4. background-color: #CCCCCC;
  5. }
  6. .bad-video .vplay{
  7. position: absolute;
  8. width: 15%;
  9. z-index: 99;
  10. top: 50%;
  11. left: 50%;
  12. -webkit-transform: translate(-50%, -50%);
  13. transform: translate(-50%, -50%);
  14. }

樓主:當(dāng)當(dāng)當(dāng)

再在后面加一個控制條

</>復(fù)制代碼

  1. 00:00/00:00
  2. 全屏

</>復(fù)制代碼

  1. .bad-video .controls {
  2. width: 100%;
  3. height: 2rem;
  4. line-height: 2rem;
  5. font-size: 0.8rem;
  6. color: white;
  7. display: block;
  8. position: absolute;
  9. bottom: 0;
  10. background-color: rgba(0, 0, 0, .55);
  11. display: -webkit-flex;
  12. display: flex;
  13. }
  14. .bad-video .controls>* {
  15. flex: 1;
  16. }
  17. .bad-video .controls>*:nth-child(1) {
  18. flex: 6;
  19. }
  20. .bad-video .controls>*:nth-child(2) {
  21. flex: 2;
  22. text-align: center;
  23. }
  24. .bad-video .controls .progressBar {
  25. margin: .75rem 5%;
  26. position: relative;
  27. width: 90%;
  28. height: .5rem;
  29. background-color: rgba(200, 200, 200, .55);
  30. border-radius: 10px;
  31. }
  32. .bad-video .controls .timeBar {
  33. position: absolute;
  34. top: 0;
  35. left: 0;
  36. width: 0;
  37. height: 100%;
  38. background-color: rgba(99, 110, 225, .85);
  39. border-radius: 10px;
  40. }

總算有個看起來像樣的了

旁白:樓主,可是還是不能播放啊
樓主:叫你別急,要不你先去擼一把,我寫好了文字@你
旁白:好啊,早說嘛,我先走了,記得@我
樓主:你走,省的我精神分裂碼兩個人的字

好,現(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

相關(guān)文章

  • H5打造屬于自己視頻放器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...

    nevermind 評論0 收藏0
  • H5打造屬于自己視頻放器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...

    NervosNetwork 評論0 收藏0
  • H5打造屬于自己視頻放器(邏輯

    摘要:回顧打造屬于自己的視頻播放器篇在上一章節(jié)之中,已經(jīng)把篇給大致樣式顯現(xiàn)了出來,接下來應(yīng)該是篇了,可是在寫之前有必要先整理一下思緒,盲目亂寫是不對的,喝杯茶,撩撩妹,生活多美妙,寫起代碼來自然心情好思路正。 回顧 H5打造屬于自己的視頻播放器(HTML篇)在上一章節(jié)之中,已經(jīng)把HTML篇給大致樣式顯現(xiàn)了出來,接下來應(yīng)該是JS篇了,可是在寫之前有必要先整理一下思緒,盲目亂寫是不對的,喝杯茶,...

    hover_lew 評論0 收藏0
  • H5打造屬于自己視頻放器(邏輯

    摘要:回顧打造屬于自己的視頻播放器篇在上一章節(jié)之中,已經(jīng)把篇給大致樣式顯現(xiàn)了出來,接下來應(yīng)該是篇了,可是在寫之前有必要先整理一下思緒,盲目亂寫是不對的,喝杯茶,撩撩妹,生活多美妙,寫起代碼來自然心情好思路正。 回顧 H5打造屬于自己的視頻播放器(HTML篇)在上一章節(jié)之中,已經(jīng)把HTML篇給大致樣式顯現(xiàn)了出來,接下來應(yīng)該是JS篇了,可是在寫之前有必要先整理一下思緒,盲目亂寫是不對的,喝杯茶,...

    Big_fat_cat 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<