專業(yè)聊城網(wǎng)站建設(shè)、豐富的網(wǎng)站建設(shè)制作經(jīng)驗,大量客戶案例!服務(wù)熱線: 15192175820 13346228859 設(shè)為首頁|加入收藏|關(guān)于我們|聯(lián)系我們
          您現(xiàn)在的位置:首頁 > 新聞中心 > 建站知識
          HTML5之視頻標簽 video應(yīng)用及案例
          來源: | 作者:管理員 | 發(fā)布時間: 2018-7-30 | 瀏覽:116次 【關(guān)閉此頁】 【打印此文

          在video標簽中,我們可以使用屬性:videoWidth & videoHeight,它獲取的是video的寬度和高度(媒體本身)。
          雖然不能直接使用,但是可以通過計算寬高比得到 video 占用的寬度和高度。
          比如讓 video 占滿寬度為480px的容器,可以根據(jù)寬高比得到此時video占用的高度。

          重要:

          • h5的video標簽,修改source的src地址,必須采用動態(tài)插入source元素的形式,否則瀏覽器不會重新請求播放資源。

          一般做法:

          • 不要自己加暫停時視頻中間的繼續(xù)播放按鈕,要使用瀏覽器默認的。

          • 暫停時,頁面顯示浮層,使用pause事件添加


           video標簽屬性

                         src="文件路徑地址" width="寬" height="高" controls="控制條" autoplay="自動播放" loop="循環(huán)" preload="預加載"
                         <video width="320" height="240" controls="controls">             <!-- 同一視頻的兼容性寫法 -->
                              <source src="movie.ogg" type="video/ogg">                     <source src="movie.mp4" type="video/mp4">
                              <!-- 同一視頻的兼容性寫法 -->
                              Your browser does not support the video tag.
                         </video>

          video標簽點擊暫停事件,起初測試階段未發(fā)現(xiàn)該兼容BUG,后來android上點擊可以暫停,ios上點擊無效果,一般bug都是反過來的,可能video標簽有它自己的想法吧!

          debug階段:

          1.懷疑定位層級問題導致底部video沒有觸發(fā),依次增加層級直到最高z-index元素video-play被覆蓋,點擊事件依然無法執(zhí)行

          2.懷疑js未能獲取DOM,js監(jiān)聽dom操作無alert彈出,改為后臺交互數(shù)據(jù)加載完成后再次監(jiān)聽點擊事件,依然無效果,再改為dom增加點擊事件依然無效果。

          3.解決方案-后來反思:用戶首次點擊video-play元素可以操縱video播放,所以增加第三方元素覆蓋video標簽范圍區(qū)域,監(jiān)聽此標簽用戶操作事件控制video播放/暫停


            標簽:
            分享到:
            上一條: 百度秒收秒排名的做法有哪些?
            下一條: 如何更換友情鏈接,交換友情鏈接有哪些技巧
            網(wǎng)站首頁| 網(wǎng)站建設(shè) 手機網(wǎng)站| 微信營銷| 經(jīng)典案例| 解決方案| 網(wǎng)站推廣| 新聞資訊| 關(guān)于我們| 售后服務(wù)| 聯(lián)系我們
            日本肥老熟hd,日韩无码啊v一区二区,中文字幕精品三级欧美,欧美一级香焦视频在线观看