建網站多少錢歡迎光臨易企網站建設公司
當前位置:易企網站建設公司 >> 建網站 >> 建網站多少錢 >> 瀏覽文章

部落冲突7本最强布阵高清图片:解決html5網頁中video標簽無法播放的方法

發布時間:2019年10月17日 文章標簽:解決,網頁,標簽,無法,播放,放的,方法 瀏覽5692次

部落冲突兵种 www.lhjyn.icu 為什么我錄制的MP4視頻在本地可以播放但是使用html5的video多媒體播放標簽不能正常播放只有一個進度條而不表現圖像?


為了避免大家碰到同樣的題目我在這里就給大家普及一下html5關于<video>標簽的知識吧。

 

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


html中播放一個視頻只必要一個標簽:

 

    <video src="//sp.ntaotu1683/localhost-wordpress-phpstudy.mp4" controls="controls" width="500" height="300"></video>

 

    代碼雖然少了許多,但是功能卻很健全,這就是html5的亮點之一吧!

 

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

 

    MP4 = MPEG 4文件使用 H264 視頻編解碼器和AAC音頻編解碼器

 

    WebM = WebM 文件使用 VP8 視頻編解碼器和 Vorbis 音頻編解碼器

 

    Ogg = Ogg 文件使用 Theora 視頻編解碼器和 Vorbis音頻編解碼器

 

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


假如欣賞器不支撐video標簽怎么辦?

 

比如IE欣賞器還有老版本的欣賞器對html5的支撐不太好,當用戶用這些欣賞器打開我們帶有視頻的網頁怎么辦呢?

 

我們可以把代碼如許寫:

 

    <video src="//sp.ntaotu1683/localhost-wordpress-phpstudy.mp4" controls="controls" width="500" height="300">您的欣賞器不支撐播放該視頻!</video>

 

如許在不支撐html5的欣賞器中就會提醒“您的欣賞器不支撐播放該視頻!”啦!


關于video標簽的擴展參數說明:

 

video 元素許可多個 source 元素。source 元素可以鏈接不同的視頻文件。欣賞器將使用第一個可識別的格式,如許我們只要多預備幾個不同格式的視頻就可以了。


用法:

 

1,  <video width="500" height="250" controls="controls">

 

2,  <source src="movie.ogg" type="video/ogg">

 

3 <source src="movie.mp4" type="video/mp4">

 

 4,您的欣賞器不支撐此種視頻格式。

 

 5, </video>

 

1,    autoplay :出現該屬性意味著視頻在停當后將主動播放,用法:autoplay="autoplay"

 

2,  controls :出現該屬性意味著向用戶表現控件,如播放按鈕等,用法:controls="controls"

 

3,   height:設置高度      width:設置寬度

 

4,   loop:主動重播,用法:loop="loop"

 

5,  preload:視頻在頁面加載時進行加載并準備播放浙江人事考試網站,用法:preload="auto" - 當頁面加載后載入整個視頻;preload="meta" - 當頁面加載后只載入元數據;preload="none" - 當頁面加載后不載入視頻。細致:若使用了autoplay,則忽略preload

 

6,    src:要播放視頻的url

 

mp4網頁播放有聲音無圖像的解決辦法:

 

關于網頁播放mp4格式的視頻,找了一些插件,這里保舉一下video.js

 

官方網址:////www.esuseo.com/videojs1683/

 

github :https://github1683/videojs/video.js/

 

demo:////www.esuSEO.com/videojs1683/downloads/video-js-4.12.5.zip

 

使用方法:

 

    ①引入文件:指派flash播放的swf文件

 

    <link href="//example1683/path/to/video-js.css" rel="stylesheet">

    <script src="//example1683/path/to/video.js"></script>

    <script>

    videojs.options.flash.swf = "//example1683/path/to/video-js.swf"

    </script>

 

    ② 設置video參數(設置mp4視頻地址)

 

    <video id="example_video_1" class="video-js vjs-default-skin"

    controls preload="auto" width="640" height="264"

    poster="//video-js.zencoder1683/oceans-clip.png"

    data-setup=‘{"example_option":true}‘>

    <source src="//video-js.zencoder1683/oceans-clip.mp4" type=‘video/mp4‘ />

    <source src="//video-js.zencoder1683/oceans-clip.webm" type=‘video/webm‘ />

    <source src="//video-js.zencoder1683/oceans-clip.ogv" type=‘video/ogg‘ />

    <p class="vjs-no-js">To view this video please enable javascript, and consider upgrading to a web browser that <a href="//videojs1683/html5-video-support/" target="_blank">supports HTML5 video</a></p>

    </video>


使用demo里面的mp4視頻源,播放統統正常,換上本身的mp4源發現只有聲音并沒有圖像。這讓我很為難。

 

想來想去這跟插件沒關系,跟欣賞器沒有關系百度優化公司,跟本身視頻源的格式編碼有關系。

 

找了許多辦法,嘗試過swf播放,但是mp4轉碼成swf格式,失真太緊張,導致視頻很模糊,質量很糟糕。

 

下載了格式工廠,嘗試著轉換了許多格式活動策劃公司,都不盡人意。

 

發現mp4的視頻編碼有三種:MPEG4(DivX),MPEG4(Xvid),AVC(H264),我使用格式工廠一個一個嘗試。

 

最終發現轉換成AVC(H264)編碼娛樂世界,完善解決題目。

 

總結:網頁播放mp4視頻,出現有聲音無圖像題目,先使用格式工廠轉換mp4->mp4格式,輸出編碼選擇AVC(H264),然后在網頁中代碼調用,看是否解決題目。



TAG標簽耗時:0.024080038070679 秒
上一篇:大型網站建設可伸縮性架構設計
下一篇:網站抽獎體系數據庫設計方案
點擊數:  相關搜索:解決 網頁 標簽 無法 播放 放的 方法