整合營(yíng)銷(xiāo)服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢(xún)熱線:

          HTML基礎(chǔ)篇-17HTML之視頻播放

          HTML基礎(chǔ)篇-17HTML之視頻播放

          頻是網(wǎng)頁(yè)承載內(nèi)容很重要的一個(gè)元素,也是必不可少的網(wǎng)頁(yè)表現(xiàn)形式(圖、文、表、視、音)之一。曾經(jīng)網(wǎng)頁(yè)要想播放視頻、制作游戲,必須得用第三方插件flash。不僅編寫(xiě)代碼要使用額外的語(yǔ)言,瀏覽器也必須得裝第三方插件,非常不方便。隨著html5標(biāo)準(zhǔn)逐漸普及,移動(dòng)端、pc端開(kāi)始拋棄flash,如今幾乎所有的瀏覽器都使用html5來(lái)制作視頻。

          目標(biāo)

          1. 了解Flash為何會(huì)被淘汰?
          2. 如何設(shè)置視頻播放?
          3. 視頻播放支持哪幾種視頻格式?

          flash崛起--網(wǎng)頁(yè)標(biāo)準(zhǔn)的恥辱

          flash是Adobe公司其中之一的產(chǎn)品。它發(fā)起于W3C與WHATWG的第五代web標(biāo)準(zhǔn)之爭(zhēng),它撿了個(gè)大便宜,乘機(jī)定義網(wǎng)頁(yè)媒體標(biāo)準(zhǔn)。

          W3C與WHATWG的第五代web標(biāo)準(zhǔn)之爭(zhēng)

          flash填補(bǔ)了當(dāng)時(shí)網(wǎng)頁(yè)只有文字和圖片的單調(diào)世界,將媒體(視頻、音頻、游戲)引入了網(wǎng)頁(yè),將網(wǎng)頁(yè)帶進(jìn)多彩的世界。

          Flash能夠用僅僅十幾K到幾百K的體積,呈現(xiàn)出放大也不會(huì)失真的矢量彩色動(dòng)圖,甚至還能夠做出足以令人沉迷一整天的Flash小游戲。

          火柴人

          Flash用第三方插件的身份,幾乎制霸了網(wǎng)頁(yè)媒體的標(biāo)準(zhǔn),讓W(xué)3C尷尬不已,甚至從某種程度上說(shuō),讓真正的網(wǎng)頁(yè)標(biāo)準(zhǔn)推廣受阻。

          flash衰敗--HTML5崛起并全面普及

          2010年4月,蘋(píng)果CEO公開(kāi)表示從此蘋(píng)果所有產(chǎn)品不再支持flash。flash從此慢慢喪失移動(dòng)端的市場(chǎng)和地位。

          喬布斯支持html5

          2012年,安卓宣布不再支持Flash,從此flash徹底失去了移動(dòng)端市場(chǎng)和地位。

          2012年html5標(biāo)準(zhǔn)確立,html5在逐漸制霸移動(dòng)端的地位時(shí),也直接沖擊了flash僅剩的桌面市場(chǎng),flash桌面市場(chǎng)的份額在逐步下降。

          各大瀏覽器逐步默認(rèn)禁用Flash,現(xiàn)2019年幾乎都全部禁用。

          默認(rèn)禁用Flash

          Adobe將在2020年停止開(kāi)發(fā)和更新flash。

          2020年停止開(kāi)發(fā)和更新flash

          flash興起衰敗皆因自己

          Flash以第三方插件的身份,做著平臺(tái)該做的事情,但沒(méi)有推動(dòng)行業(yè)標(biāo)準(zhǔn)統(tǒng)一化,反而企圖私立標(biāo)準(zhǔn)。

          隨著功能的增多,能解碼編碼H.264,能進(jìn)行3D渲染,能播放7.1聲道環(huán)繞聲等,功能集于一身變得臃腫,效率變得低下。

          Flash非常不安全。Flash能夠運(yùn)行相當(dāng)復(fù)雜的代碼,這讓Flash非常容易被滲透。加上Adobe在安全方面的不上心,這令Flash安全問(wèn)題頻發(fā)。

          Flash很不穩(wěn)定。作為一個(gè)插件,它自身頻頻崩潰也就罷了,還經(jīng)常拉著瀏覽器乃至操作系統(tǒng)一起殉情。

          Flash加劇了手機(jī)的耗電量。

          html5媒體新標(biāo)準(zhǔn)--Video標(biāo)簽

          作用是在 HTML 頁(yè)面中嵌入視頻元素。Video定義視頻,比如電影片段或其他視頻流。

          視頻播放

          Video標(biāo)簽的屬性

          • src 視頻的播放源
          • controls 瀏覽器自帶的控制條
          • width 視頻寬度
          • height 視頻高度
          • poster 視頻封面
          • autoplay 自動(dòng)播放
          • preload 預(yù)加載

          有四個(gè)是必須的屬性:src、controls、width、height屬性。

          視頻播放代碼

          source標(biāo)簽

          <video> 元素支持三種視頻格式: MP4, WebM, 和 Ogg。

          <source> 元素可以鏈接不同格式的視頻文件。瀏覽器將使用第一個(gè)可識(shí)別的格式。

          • src 視頻的播放源
          • Type 視頻格式 MP4, WebM, 和 Ogg

          支持多格式的視頻

          總結(jié)

          video標(biāo)簽體系

          頻、視頻的格式

          開(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被稱(chēng)為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í)候在課本的角上畫(huà)好一套走路的小人的不同動(dòng)作后,快速翻動(dòng)書(shū)頁(yè),畫(huà)面中的小人會(huì)走路的原因,大家可以自行百度"視覺(jué)暫留原理")。

          一秒鐘25張1080乘720的圖片的視頻,一秒鐘就會(huì)占0.74*25=18.5mb的內(nèi)存。如果是一分鐘呢,18.5*60=1110mb約等于1.08gb。這樣的數(shù)據(jù)量是不是很?chē)樔恕?/p>

          但事實(shí)上我們下載的1080*720的一小時(shí)三十分鐘左右的視頻的體積往往也沒(méi)有超過(guò)1gb,這又是為什么呢?

          這就是"編"的功勞!對(duì)數(shù)碼進(jìn)行整理和組織的主要目的是壓縮體積,壓縮數(shù)據(jù)體積既能節(jié)省磁盤(pán)又能方便傳播與攜帶,是信息技術(shù)的關(guān)鍵技術(shù)之一,壓縮的方法一般有兩類(lèi),一類(lèi)叫做無(wú)損壓縮,也就是通過(guò)對(duì)這一大堆數(shù)碼進(jìn)行一個(gè)特殊的組合使其占有更小的空間,一類(lèi)叫做有損壓縮,是在無(wú)損壓縮的基礎(chǔ)上剔除掉人眼睛識(shí)別不到的冗余信息。具體的壓縮過(guò)程涉及到很多數(shù)學(xué)知識(shí),這里大家簡(jiǎn)單了解一下即可。

          壓縮后的視頻或音頻文件最終通過(guò)播放器對(duì)該文件的壓縮算法進(jìn)行逆向運(yùn)算后,還原成計(jì)算機(jī)可以解讀的畫(huà)面和聲音再呈現(xiàn)給觀眾,這個(gè)過(guò)程叫做"解碼"。

          通過(guò)"編"的方式壓縮文件體積,通過(guò)"解"的方式再還原出文件內(nèi)容成了處理大規(guī)模數(shù)據(jù)的通用手法。

          不同的編碼和解碼方式催生出不同的文件格式,這種情況下,瀏覽器在播放視頻的時(shí)候就要有應(yīng)對(duì)不同格式的不同解碼方式,在15年以前,瀏覽器為了能夠播放不同格式的視頻,就要調(diào)用電腦中不同的播放器,這個(gè)過(guò)程的寫(xiě)法非常麻煩。隨著技術(shù)不斷地整合,時(shí)至今日,在頁(yè)面中播放視頻不需要這么復(fù)雜的寫(xiě)法了,但是因?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ǔ)句有三種寫(xiě)法,像這樣

          一:<!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

          這讓我想到了孔乙己的"茴"字的多種寫(xiě)法

          是不是很麻煩,其實(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è):(偷懶的話(huà)可以寫(xiě)成"controls"就ok,不必加"="以及后面的內(nèi)容了。)

          如果以后您使用自己編寫(xiě)的控制界面,就可以不添加這個(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è)文件的類(lèi)型。

          不同格式的文件的生成需要我們自己去做,這就涉及到如何給一個(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è)面效果如下:

          視頻畫(huà)面變小了,和視頻并排的是我們之前添加的音頻文件,由此可知,這兩個(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í)目錄

          HTML序章(學(xué)習(xí)目的、對(duì)象、基本概念)——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          HTML是什么?——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

          第一個(gè)HTML頁(yè)面如何寫(xiě)?——零基礎(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è)制作

          多站點(diǎn)都會(huì)使用到視頻. HTML5 提供了展示視頻的標(biāo)準(zhǔn)。

          檢測(cè)您的瀏覽器是否支持 HTML5 視頻:

          檢測(cè)

          Web站點(diǎn)上的視頻

          直到現(xiàn)在,仍然不存在一項(xiàng)旨在網(wǎng)頁(yè)上顯示視頻的標(biāo)準(zhǔn)。

          今天,大多數(shù)視頻是通過(guò)插件(比如 Flash)來(lái)顯示的。然而,并非所有瀏覽器都擁有同樣的插件。

          HTML5 規(guī)定了一種通過(guò) video 元素來(lái)包含視頻的標(biāo)準(zhǔn)方法。

          瀏覽器支持

          Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <video> 元素.

          注意: Internet Explorer 8 或者更早的IE版本不支持 <video> 元素。

          HTML5 (視頻)- 如何工作

          如需在 HTML5 中顯示視頻,您所有需要的是:

          實(shí)例

          <video width="320" height="240" controls>

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

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

          您的瀏覽器不支持Video標(biāo)簽。

          </video>

          <video> 元素提供了 播放、暫停和音量控件來(lái)控制視頻。

          同時(shí)<video> 元素元素也提供了 width 和 height 屬性控制視頻的尺寸.如果設(shè)置的高度和寬度,所需的視頻空間會(huì)在頁(yè)面加載時(shí)保留。。如果沒(méi)有設(shè)置這些屬性,瀏覽器不知道大小的視頻,瀏覽器就不能再加載時(shí)保留特定的空間,頁(yè)面就會(huì)根據(jù)原始視頻的大小而改變。

          <video> 與</video> 標(biāo)簽之間插入的內(nèi)容是提供給不支持 video 元素的瀏覽器顯示的。

          <video> 元素支持多個(gè) <source> 元素. <source> 元素可以鏈接不同的視頻文件。瀏覽器將使用第一個(gè)可識(shí)別的格式:

          視頻格式與瀏覽器的支持

          當(dāng)前, <video> 元素支持三種視頻格式: MP4, WebM, 和 Ogg:

          瀏覽器MP4WebMOgg
          Internet ExplorerYESNONO
          ChromeYESYESYES
          FirefoxYESYESYES
          SafariYESNONO
          OperaYES (從 Opera 25 起)YESYES
          • MP4=帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件

          • WebM=帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件

          • Ogg=帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件

          視頻格式

          格式MIME-type
          MP4video/mp4
          WebMvideo/webm
          Oggvideo/ogg

          HTML5 <video> - 使用 DOM 進(jìn)行控制

          HTML5 <video> 和 <audio> 元素同樣擁有方法、屬性和事件。

          <video> 和 <audio>元素的方法、屬性和事件可以使用JavaScript進(jìn)行控制.

          其中的方法有用于播放、暫停以及加載等。其中的屬性(比如時(shí)長(zhǎng)、音量等)可以被讀取或設(shè)置。其中的 DOM 事件能夠通知您,比方說(shuō),<video> 元素開(kāi)始播放、已暫停,已停止,等等。

          例中簡(jiǎn)單的方法,向我們演示了如何使用 <video> 元素,讀取并設(shè)置屬性,以及如何調(diào)用方法。

          實(shí)例 1

          為視頻創(chuàng)建簡(jiǎn)單的播放/暫停以及調(diào)整尺寸控件:

          播放/暫停 放大 縮小 普通

          上面的例子調(diào)用了兩個(gè)方法:play() 和 pause()。它同時(shí)使用了兩個(gè)屬性:paused 和 width。

          HTML5 Video 標(biāo)簽

          標(biāo)簽描述
          <video>定義一個(gè)視頻
          <source>定義多種媒體資源,比如 <video> 和<audio>
          <track>定義在媒體播放器文本軌跡

          主站蜘蛛池模板: 午夜视频在线观看一区| 99精品国产高清一区二区| 中文字幕一区二区三匹| 区三区激情福利综合中文字幕在线一区亚洲视频1 | 一本大道东京热无码一区| 蜜桃视频一区二区三区| 亚洲AV无码一区二区乱子仑| 无码人妻精品一区二区三区66| 成人区人妻精品一区二区不卡视频 | 性色av无码免费一区二区三区 | 日韩视频在线一区| 亚洲第一区二区快射影院| 亚洲国产一区二区a毛片| 另类免费视频一区二区在线观看| 成人乱码一区二区三区av| 国产精品污WWW一区二区三区| 一区二区高清在线观看| 丝袜美腿高跟呻吟高潮一区| 日韩精品无码久久一区二区三| 视频精品一区二区三区| 国产伦精品一区二区三区视频小说| 麻豆国产一区二区在线观看| 麻豆AV一区二区三区| 国产精品电影一区| 日本一区二三区好的精华液 | 波霸影院一区二区| 激情啪啪精品一区二区| 国产免费播放一区二区| 中文字幕一区日韩在线视频| 国产精品无码一区二区三级| 日韩亚洲AV无码一区二区不卡| 精品三级AV无码一区| 国产精品高清一区二区人妖| 在线视频精品一区| 一区国严二区亚洲三区| 性无码一区二区三区在线观看| 亚洲宅男精品一区在线观看| 日韩在线一区二区三区视频| 一区二区三区免费看| 久久亚洲综合色一区二区三区| 亚洲一区二区三区高清不卡|