html5網頁中用video標簽能夠播放MP4視頻的解決辦法

電腦雜談  發布時間:2020-01-29 02:04:58  來源:網絡整理

谷歌瀏覽器 video標簽_谷歌瀏覽器 video標簽_360瀏覽器新標簽

今天一位朋友Q我說:為什么我拍攝的MP4視頻在本地可以播放之后使用html5video多媒體播放標簽不能正常播放只有一個進度條而不顯示圖像?當時我也更好奇MP4視頻可以用video標簽播放呀,我就一直用,畢竟是好朋友我還是親自去篩查了一下問題,這不結論處來了,其實就是一個視頻編碼的問題,格式仍然都是MP4但是html中只支持H.264的編碼格式,無奈只好再次轉換一下編碼了。

html5-video-mp4

為了防止大家見到同樣的難題我在這里就幫你們普及一下html5關于<video>標簽的知識吧:

谷歌瀏覽器 video標簽_谷歌瀏覽器 video標簽_360瀏覽器新標簽

在使用html4協議做網站時我們想要在網站上播放一個視頻要不使用flash去播放,要么就是嵌入式頁面來實現,對于html5來說這兩種方式十分的不便于因為一個牛逼哄哄的<video>出現了,這個標簽的功能就是讓多媒體文件可以很方便的在網站中播放。

<videosrc=“#8221;controls=“controls”width=“500”height=“300”></video>

代碼仍然少了這些,但是功能仍太完善谷歌瀏覽器 video標簽,這就是html5的看點之一吧!

360瀏覽器新標簽_谷歌瀏覽器 video標簽_谷歌瀏覽器 video標簽

關于<video>標簽所支持的視頻格式跟編碼:

通過里面的信息我們會看到只有h264編碼的MP4視頻(MPEG-LA公司)、VP8編碼的webm格式的視頻(Google公司)和Theora編碼的ogg格式的視頻(iTouch開發)可以支持html5的<video>標簽。

比如IE瀏覽器還有老版本的瀏覽器對html5的支持不太好,當客戶用這種瀏覽器打開我們帶有視頻的網站怎么辦呢?

360瀏覽器新標簽_谷歌瀏覽器 video標簽_谷歌瀏覽器 video標簽

我們可以把代碼那樣寫:

<videosrc=“#8221;controls=“controls”width=“500”height=“300”>您的瀏覽器不支持播放該視頻!</video>

這樣在不支持html5的瀏覽器中經常提醒“您的瀏覽器不支持播放該視頻!”啦!

谷歌瀏覽器 video標簽_谷歌瀏覽器 video標簽_360瀏覽器新標簽

video 元素允許多個 source 元素。source 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個可識別的格式,這樣我們即使多打算幾個不同格式的視頻就可以了。

用法:

<videowidth=“500”height=“250”controls=“controls”><sourcesrc=“movie.ogg”type=“video/ogg”><sourcesrc=“movie.mp4”type=“video/mp4”>您的瀏覽器不支持此種視頻格式。</video>

autoplay :出現該屬性意味著視頻在就緒后將手動播放,用法:autoplay=”autoplay”controls :出現該屬性意味著向用戶顯示控件,如播放按鍵等,用法:controls=”controls”height:設置高度 width:設置長度loop:自動重播,用法:loop=”loop”preload:視頻在頁面加載時進行讀取并預備播放谷歌瀏覽器 video標簽,用法:preload=”auto” – 當頁面加載后載入整個視頻;preload=”meta” – 當頁面加載后只載入元數據;preload=”none” – 當頁面加載后不載入視頻。注意:若使用了autoplay,則忽略preloadsrc:要播放視頻的url

關于<video>標簽我就介紹到此處,相信你們都對這個標簽有了深刻的知道!最后幫你們分享一個視頻編碼轉換器,使用便利的一個小巧工具,大家用QQ快捷登錄本站即可獲取相應積分下載附件了。


本文來自電腦雜談,轉載請注明本文網址:
http://www.gefhbj.live/a/bofangqi/article-138743-1.html

    發表評論  請自覺遵守互聯網相關的政策法規,嚴禁發布、暴力、反動的言論

    熱點圖片
    拼命載入中...
    少林宝藏100在线客服 云南十一选五遗漏走势图 香港九龙高手论坛精选 成都桑拿 qq麻将规则 北京赛车pk计划 腾讯麻将来了安卓 历届欧冠冠军得主 江西优乐麻将官方下载 重庆快乐十分平台 pc蛋蛋赔率跟踪 组织网络打麻将赌博 捕鱼来了娱乐场网址 特殊服务有什么项目 配置股票型基金 宝博棋牌app下载 姚记棋牌app下载