整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
為什么錄制的MP4視頻在本地可以播放但是使用html5的video多媒體播放標(biāo)簽不能正常播放只有一個(gè)進(jìn)度條而不顯示圖像？其實(shí)就是一個(gè)視頻編碼的問(wèn)題，格式雖然都是MP4但是html中只支持H.264的編碼格式，無(wú)奈只能重新轉(zhuǎn)換一下編碼了。
為了避免大家遇到同樣的問(wèn)題我在這里就給大家普及一下html5關(guān)于<video>標(biāo)簽的知識(shí)吧：在使用html4協(xié)議做網(wǎng)站時(shí)我們想要在網(wǎng)頁(yè)上播放一個(gè)視頻要不使用flash去播放，要么就是嵌入式頁(yè)面來(lái)實(shí)現(xiàn)，對(duì)于html5來(lái)說(shuō)這兩種方法非常的不方便因?yàn)橐粋€(gè)牛逼哄哄的<video>出現(xiàn)了，這個(gè)標(biāo)簽的功能就是讓多媒體文件可以很方便的在網(wǎng)頁(yè)中播放。
html中播放一個(gè)視頻只需要一個(gè)標(biāo)簽：
代碼雖然少了很多，但是功能卻很健全，這就是html5的亮點(diǎn)之一吧！
關(guān)于<video>標(biāo)簽所支持的視頻格式和編碼：
通過(guò)上面的信息我們會(huì)發(fā)現(xiàn)只有h264編碼的MP4視頻（MPEG-LA公司）、VP8編碼的webm格式的視頻（Google公司）和Theora編碼的ogg格式的視頻（iTouch開(kāi)發(fā)）可以支持html5的<video>標(biāo)簽。
如果瀏覽器不支持video標(biāo)簽怎么辦？
比如IE瀏覽器還有老版本的瀏覽器對(duì)html5的支持不太好，當(dāng)用戶用這些瀏覽器打開(kāi)我們帶有視頻的網(wǎng)頁(yè)怎么辦呢？
我們可以把代碼這樣寫：
這樣在不支持html5的瀏覽器中就會(huì)提示“您的瀏覽器不支持播放該視頻！”啦！
關(guān)于video標(biāo)簽的擴(kuò)展參數(shù)說(shuō)明：
video 元素允許多個(gè) source 元素。source 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個(gè)可識(shí)別的格式，這樣我們只要多準(zhǔn)備幾個(gè)不同格式的視頻就可以了。
用法：
關(guān)于<video>標(biāo)簽我就介紹到這里，相信大家都對(duì)這個(gè)標(biāo)簽有了深刻的了解！
【推薦課程：Html5視頻教程】
以上就是解決H5網(wǎng)頁(yè)中用video標(biāo)簽無(wú)法播放MP4視頻的方法的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注其它相關(guān)文章！
更多技巧請(qǐng)《轉(zhuǎn)發(fā) + 關(guān)注》哦！
映維網(wǎng) 2019年11月29日）當(dāng)前的AR系統(tǒng)僅追蹤稀疏的幾何特征，不計(jì)算所有像素的深度。所以，大多數(shù)AR效果都是純粹的疊加層，無(wú)法實(shí)現(xiàn)真實(shí)的對(duì)象遮擋效果。針對(duì)這種情況，F(xiàn)acebook提出了一種新穎算法，其可以將稀疏深度實(shí)時(shí)傳播至每個(gè)像素。生成的深度圖在時(shí)間空間方面十分平滑，但在深度邊緣顯示出明顯的不連續(xù)性。這使得AR效果可以與真實(shí)場(chǎng)景完全交互并被其遮擋。
該研究由Facebook計(jì)算機(jī)攝影學(xué)團(tuán)隊(duì)研究科學(xué)家約翰內(nèi)斯·科普夫（Johannes Kopf） 和華盛頓大學(xué)亞歷山大·霍林斯基（Aleksander Holynski）聯(lián)合完成，相關(guān)論文《Fast Depth Densification for Occlusion-aware Augmented Reality（用于遮擋感知型增強(qiáng)現(xiàn)實(shí)的快速深度密化）》已經(jīng)公開(kāi)發(fā)表。
相關(guān)論文：Fast Depth Densification for Occlusion-aware Augmented Reality
Facebook的算法使用視頻和稀疏SLAM重建作為輸入。首先，它會(huì)從光流場(chǎng)的梯度變化估計(jì)軟深度邊緣。由于在遮擋附近的光流不可靠，所以研究人員使用了一種全新的可靠性測(cè)量仿佛來(lái)計(jì)算正向和反向流場(chǎng)，并融合所得到的深度邊緣。然后，算法會(huì)細(xì)化深度邊緣，并將其與圖像邊緣對(duì)齊，從而定位深度邊緣。最后，他們優(yōu)化了傳播深度，但鼓勵(lì)在恢復(fù)的深度邊緣位置出現(xiàn)不連續(xù)性。團(tuán)隊(duì)提供了一系列的真實(shí)示例結(jié)果，并演示了幾種可識(shí)別遮擋的AR視頻效果。為了定量評(píng)估算法，F(xiàn)acebook表征了使深度圖適用于AR應(yīng)用程序的屬性，并提出了新穎的評(píng)估指標(biāo)來(lái)說(shuō)明效果。這家公司指出，與一組競(jìng)爭(zhēng)性基準(zhǔn)算法相比，他們的算法具有優(yōu)勢(shì)。
約翰內(nèi)斯·科普夫（Johannes Kopf）說(shuō)：“我們用SLAM來(lái)非常精確地追蹤數(shù)個(gè)點(diǎn)的深度，但我們同時(shí)采用一種實(shí)時(shí)光流方法來(lái)預(yù)測(cè)余下像素的運(yùn)動(dòng)。但由于這是一種實(shí)時(shí)方法，其質(zhì)量不足以直接進(jìn)行深度預(yù)測(cè)，不過(guò)我們可以用它來(lái)確定場(chǎng)景中的主要深度邊緣位置。然后，我們回到這些非常精確的SLAM點(diǎn)，并將它們的深度傳播至所有余下的像素，但在這些恢復(fù)的深度邊緣位置停止傳播。這可以確保所有的對(duì)象邊緣都非常清晰，這非常快速，并且產(chǎn)生了非常適合AR的深度映射。因?yàn)槌诉@些都超級(jí)清晰的不連續(xù)處之外，一切都非常平滑。它們非常適合用來(lái)將虛擬對(duì)象插入至看似確實(shí)置身其間的場(chǎng)景，這是因?yàn)樗鼈兛梢晕挥谡鎸?shí)對(duì)象的前面或后面。我非常期待看到這項(xiàng)技術(shù)，以及其他人正在研發(fā)的技術(shù)，將如何幫助模糊真實(shí)和虛擬的界限，并令A(yù)R更為逼真 更加引人入勝。”
原文鏈接：https://yivian.com/news/69367.html
頻、視頻的格式
開(kāi)始學(xué)習(xí)之前，我們要下載些素材用來(lái)測(cè)試使用，地址如下：https://pan.baidu.com/s/1reRWno0ibYRcYXjw4MClqw
提取碼：td80
其中包括兩個(gè)視頻一個(gè)音頻和一個(gè)安裝程序。
學(xué)習(xí)如何在頁(yè)面中添加音頻、視頻之前應(yīng)該了解一點(diǎn)基礎(chǔ)知識(shí)。
我們應(yīng)該都有在互聯(lián)網(wǎng)上下載電影、視頻、音樂(lè)的經(jīng)歷，大家會(huì)注意到，有的視頻文件名的后綴是.avi，有的視頻是.mp4，還有.mov的，據(jù)不完全統(tǒng)計(jì)，常見(jiàn)的各種視頻格式有十幾種之多。
常見(jiàn)的音頻的格式比起視頻來(lái)會(huì)顯得少一些，一般是.wav和.mp3格式。
為什么存儲(chǔ)相同的內(nèi)容可以有這么多不同的格式呢？
格式產(chǎn)生的核心在于對(duì)音頻、視頻等多媒體文件進(jìn)行的不同編碼方式。
那什么是編碼呢？
簡(jiǎn)單來(lái)說(shuō)我們可以把"編碼"這個(gè)詞分成兩個(gè)部分，第一個(gè)是"編"，也就是"整理、組織"的意思，第二個(gè)是"碼"，也就是我們平時(shí)所說(shuō)的"數(shù)碼"。
首先說(shuō)"碼"，我們的計(jì)算機(jī)中的數(shù)據(jù)最終都是通過(guò)二進(jìn)制的數(shù)字（0和1）來(lái)存儲(chǔ)或計(jì)算的，這些0或1就是數(shù)碼。無(wú)論代碼、程序、圖片、音樂(lè)、視頻、文字等的存儲(chǔ)與計(jì)算都不例外。不管多么復(fù)雜或簡(jiǎn)單的文件，在計(jì)算機(jī)看來(lái)，都是一大堆0和1。
一個(gè)0或1被稱為1比特，圖片或視頻中的一個(gè)黑白像素通常是8比特（八位），如果一張1080乘720個(gè)像素的圖片所占內(nèi)存的大小就是1080*720*8=6220800字節(jié)，約等于0,74mb。如果一個(gè)視頻每秒中有25幀，也就是一秒鐘在我們眼前閃過(guò)25張圖片（視頻播放實(shí)際上就是在我們眼前快速的更替圖片，這些圖片在大腦中會(huì)被自動(dòng)連成動(dòng)作，這也是小的時(shí)候在課本的角上畫好一套走路的小人的不同動(dòng)作后，快速翻動(dòng)書頁(yè)，畫面中的小人會(huì)走路的原因，大家可以自行百度"視覺(jué)暫留原理"）。
一秒鐘25張1080乘720的圖片的視頻，一秒鐘就會(huì)占0.74*25=18.5mb的內(nèi)存。如果是一分鐘呢，18.5*60=1110mb約等于1.08gb。這樣的數(shù)據(jù)量是不是很嚇人。
但事實(shí)上我們下載的1080*720的一小時(shí)三十分鐘左右的視頻的體積往往也沒(méi)有超過(guò)1gb，這又是為什么呢？
這就是"編"的功勞！對(duì)數(shù)碼進(jìn)行整理和組織的主要目的是壓縮體積，壓縮數(shù)據(jù)體積既能節(jié)省磁盤又能方便傳播與攜帶，是信息技術(shù)的關(guān)鍵技術(shù)之一，壓縮的方法一般有兩類，一類叫做無(wú)損壓縮，也就是通過(guò)對(duì)這一大堆數(shù)碼進(jìn)行一個(gè)特殊的組合使其占有更小的空間，一類叫做有損壓縮，是在無(wú)損壓縮的基礎(chǔ)上剔除掉人眼睛識(shí)別不到的冗余信息。具體的壓縮過(guò)程涉及到很多數(shù)學(xué)知識(shí)，這里大家簡(jiǎn)單了解一下即可。
壓縮后的視頻或音頻文件最終通過(guò)播放器對(duì)該文件的壓縮算法進(jìn)行逆向運(yùn)算后，還原成計(jì)算機(jī)可以解讀的畫面和聲音再呈現(xiàn)給觀眾，這個(gè)過(guò)程叫做"解碼"。
通過(guò)"編"的方式壓縮文件體積，通過(guò)"解"的方式再還原出文件內(nèi)容成了處理大規(guī)模數(shù)據(jù)的通用手法。
不同的編碼和解碼方式催生出不同的文件格式，這種情況下，瀏覽器在播放視頻的時(shí)候就要有應(yīng)對(duì)不同格式的不同解碼方式，在15年以前，瀏覽器為了能夠播放不同格式的視頻，就要調(diào)用電腦中不同的播放器，這個(gè)過(guò)程的寫法非常麻煩。隨著技術(shù)不斷地整合，時(shí)至今日，在頁(yè)面中播放視頻不需要這么復(fù)雜的寫法了，但是因?yàn)槊總€(gè)瀏覽器都不是包打一切，因此，雖然不用指定播放器，但是也要預(yù)設(shè)不同格式的視頻來(lái)應(yīng)對(duì)不同的瀏覽器。
因此，我們?cè)谶@一部分的學(xué)習(xí)中除了講解如何向頁(yè)面添加不同格式的音視頻外還會(huì)告訴大家如何為音視頻轉(zhuǎn)換格式。
為頁(yè)面添加音頻、視頻
添加音頻使用<audio></audio>標(biāo)簽，這個(gè)標(biāo)簽被所有瀏覽器支持，是html5推薦的音頻導(dǎo)入標(biāo)簽，但是遺憾的是在html4標(biāo)準(zhǔn)中是不被支持的或者說(shuō)是非法的。
這里給大家簡(jiǎn)要介紹一下html5和html4的區(qū)別。
簡(jiǎn)單來(lái)說(shuō)呢，一個(gè)html文件的第一條語(yǔ)句是<!DOCTYPE HTML>，它就是HTML5標(biāo)準(zhǔn)的文件。如果是html4，它的第一條聲明語(yǔ)句有三種寫法，像這樣
一：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
二：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
三：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
版權(quán)聲明：本文為CSDN博主「痦子」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/yh1061632045/article/details/81518141
這讓我想到了孔乙己的"茴"字的多種寫法
是不是很麻煩，其實(shí)html5比html4更簡(jiǎn)單，功能更強(qiáng)大，而且我們一直以html5的標(biāo)準(zhǔn)進(jìn)行學(xué)習(xí)，所以大家不必糾結(jié)。
下面我們導(dǎo)入一個(gè)音頻試試吧。示例代碼如下：
<!DOCTYPE HTML>
<html>
<head>
<title>音視頻導(dǎo)入</title>
</head>
<body>
<audio controls="controls">
<source src="audio/千年的祈禱.mp3" type="audio/mp3" />
</audio>
</body>
</html>頁(yè)面效果如下：
其中controls屬性就是用來(lái)顯示播放控制界面的，就是這個(gè)：（偷懶的話可以寫成"controls"就ok，不必加"="以及后面的內(nèi)容了。）
如果以后您使用自己編寫的控制界面，就可以不添加這個(gè)屬性。
刪掉這個(gè)屬性后就是這樣：這樣為自定義的播放控制界面留出了位置。
<audio></audio>標(biāo)簽夾著<source>標(biāo)簽，一個(gè)<audio></audio>標(biāo)簽中可以添加多個(gè)<source>用以支持不同的格式要求。示例代碼如下：（這段代碼來(lái)自w3school）
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.<!--你的瀏覽器不支持這個(gè)音頻元素-->
</audio>type屬性是告訴瀏覽器音樂(lè)文件的類型。
不同格式的文件的生成需要我們自己去做，這就涉及到如何給一個(gè)音頻文件進(jìn)行格式轉(zhuǎn)化的問(wèn)題。這個(gè)問(wèn)題我們明天再說(shuō)，今天先學(xué)習(xí)為頁(yè)面添加音頻和視頻。
下面我們來(lái)看一下視頻的導(dǎo)入方法，示例代碼如下：
<video controls>
<source src="video/阿塔麗.mp4" type="video/mp4" />
</video>頁(yè)面效果如下:
我們可以通過(guò)設(shè)置height和width屬性來(lái)控制視頻的面積。實(shí)例代碼如下：
<video controls width="850" height="500" >
<source src="video/阿塔麗.mp4" type="video/mp4" />
</video>頁(yè)面效果如下：
視頻畫面變小了，和視頻并排的是我們之前添加的音頻文件，由此可知，這兩個(gè)元素都是內(nèi)聯(lián)元素。
今天的內(nèi)容結(jié)束了，明天我們繼續(xù)學(xué)習(xí)格式轉(zhuǎn)換和為不同瀏覽器預(yù)設(shè)不同音視頻格式的方法。
如果您有任何疑問(wèn)請(qǐng)給我留言，如有問(wèn)題或錯(cuò)誤請(qǐng)予以斧正！
HTML序章（學(xué)習(xí)目的、對(duì)象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
第一個(gè)HTML頁(yè)面如何寫？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML頁(yè)面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
在HTML頁(yè)面中嵌入其他頁(yè)面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
封閉在家學(xué)網(wǎng)頁(yè)制作！為頁(yè)面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
為HTML頁(yè)面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
