整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML基礎篇-17HTML之視頻播放

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

          目標

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

          flash崛起--網頁標準的恥辱

          flash是Adobe公司其中之一的產品。它發起于W3C與WHATWG的第五代web標準之爭,它撿了個大便宜,乘機定義網頁媒體標準。

          W3C與WHATWG的第五代web標準之爭

          flash填補了當時網頁只有文字和圖片的單調世界,將媒體(視頻、音頻、游戲)引入了網頁,將網頁帶進多彩的世界。

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

          火柴人

          Flash用第三方插件的身份,幾乎制霸了網頁媒體的標準,讓W3C尷尬不已,甚至從某種程度上說,讓真正的網頁標準推廣受阻。

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

          2010年4月,蘋果CEO公開表示從此蘋果所有產品不再支持flash。flash從此慢慢喪失移動端的市場和地位。

          喬布斯支持html5

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

          2012年html5標準確立,html5在逐漸制霸移動端的地位時,也直接沖擊了flash僅剩的桌面市場,flash桌面市場的份額在逐步下降。

          各大瀏覽器逐步默認禁用Flash,現2019年幾乎都全部禁用。

          默認禁用Flash

          Adobe將在2020年停止開發和更新flash。

          2020年停止開發和更新flash

          flash興起衰敗皆因自己

          Flash以第三方插件的身份,做著平臺該做的事情,但沒有推動行業標準統一化,反而企圖私立標準。

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

          Flash非常不安全。Flash能夠運行相當復雜的代碼,這讓Flash非常容易被滲透。加上Adobe在安全方面的不上心,這令Flash安全問題頻發。

          Flash很不穩定。作為一個插件,它自身頻頻崩潰也就罷了,還經常拉著瀏覽器乃至操作系統一起殉情。

          Flash加劇了手機的耗電量。

          html5媒體新標準--Video標簽

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

          視頻播放

          Video標簽的屬性

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

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

          視頻播放代碼

          source標簽

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

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

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

          支持多格式的視頻

          總結

          video標簽體系

          級版HTML視頻教程(全網原創首發!)

          什么是HTML?HTML指的是超文本標記語言,它是從事網頁設計工作的基礎,也是網站開發者必須熟練掌握的一門標記語言。應廣大學員的強烈要求,我愛自學網特推出《HTML基礎教程》,希望能得到廣大學員的支持。



          學習交流

          標 題

          第一課:HTML語言框架和相關標簽95 1-1 學習html的前提和必要性53662 1-2 什么是HTML33819 1-3 HTML語言的整體框架135783 1-4 HTML語言的整體框架231727 1-5 行標簽和段標簽29866 1-6 文字屬性標簽28853 1-7 文字格式化標簽26888 1-8 body標簽27570 1-9 標題標簽25212

          第二課:常用標簽代碼0 2-1 圖片37992 2-2 超鏈接127213 2-3 超鏈接223253 2-4 iframe標簽25784 2-5 橫線22900 2-6 列表22740 2-7 無序列表20544 2-8 有序列表21073 2-9 滾動標簽23217 2-10 轉義字符22227

          第三課:表格標簽83 3-1 表格31370 3-2 表格屬性123819 3-3 表格屬性223066

          您說說看 我發明的...是不是很牛逼呀[滑稽]

          總 高級版學習資料文件高達10G!!!

          總 高級版學習高清視頻資料的高達35G!!!

          需要的話我后期會更新,所以關注我,學到的好東西都是你自己的哦[滑稽]

          那么大概內容就更新到這里

          本教程后期會逐一更新高清視頻學習資料+超詳細的學習資料教程!

          別忘了四連!!【點贊 收藏 關注 投幣】

          我怕你到時候想找我都找不到了~[鮮花]

          注:本人原創首發,未經允許禁止轉載/抄襲,如有違法,本人將有權追究法律責任!!!

          TML 音頻/視頻 DOM 參考手冊

          HTML5 DOM 為 <audio> 和 <video> 元素提供了方法、屬性和事件。

          這些方法、屬性和事件允許您使用 JavaScript 來操作 <audio> 和 <video> 元素。

          HTML 音頻/視頻 方法

          方法描述
          addTextTrack()向音頻/視頻添加新的文本軌道。
          canPlayType()檢測瀏覽器是否能播放指定的音頻/視頻類型。
          load()重新加載音頻/視頻元素。
          play()開始播放音頻/視頻。
          pause()暫停當前播放的音頻/視頻。

          HTML 音頻/視頻屬性

          屬性描述
          audioTracks返回表示可用音頻軌道的 AudioTrackList 對象。
          autoplay設置或返回是否在加載完成后隨即播放音頻/視頻。
          buffered返回表示音頻/視頻已緩沖部分的 TimeRanges 對象。
          controller返回表示音頻/視頻當前媒體控制器的 MediaController 對象。
          controls設置或返回音頻/視頻是否顯示控件(比如播放/暫停等)。
          crossOrigin設置或返回音頻/視頻的 CORS 設置。
          currentSrc返回當前音頻/視頻的 URL。
          currentTime設置或返回音頻/視頻中的當前播放位置(以秒計)。
          defaultMuted設置或返回音頻/視頻默認是否靜音。
          defaultPlaybackRate設置或返回音頻/視頻的默認播放速度。
          duration返回當前音頻/視頻的長度(以秒計)。
          ended返回音頻/視頻的播放是否已結束。
          error返回表示音頻/視頻錯誤狀態的 MediaError 對象。
          loop設置或返回音頻/視頻是否應在結束時重新播放。
          mediaGroup設置或返回音頻/視頻所屬的組合(用于連接多個音頻/視頻元素)。
          muted設置或返回音頻/視頻是否靜音。
          networkState返回音頻/視頻的當前網絡狀態。
          paused設置或返回音頻/視頻是否暫停。
          playbackRate設置或返回音頻/視頻播放的速度。
          played返回表示音頻/視頻已播放部分的 TimeRanges 對象。
          preload設置或返回音頻/視頻是否應該在頁面加載后進行加載。
          readyState返回音頻/視頻當前的就緒狀態。
          seekable返回表示音頻/視頻可尋址部分的 TimeRanges 對象。
          seeking返回用戶是否正在音頻/視頻中進行查找。
          src設置或返回音頻/視頻元素的當前來源。
          startDate返回表示當前時間偏移的 Date 對象。
          textTracks返回表示可用文本軌道的 TextTrackList 對象。
          videoTracks返回表示可用視頻軌道的 VideoTrackList 對象。
          volume設置或返回音頻/視頻的音量。

          HTML 音頻/視頻事件

          事件描述
          abort當音頻/視頻的加載已放棄時觸發。
          canplay當瀏覽器可以開始播放音頻/視頻時觸發。
          canplaythrough當瀏覽器可在不因緩沖而停頓的情況下進行播放時觸發。
          durationchange當音頻/視頻的時長已更改時觸發。
          emptied當目前的播放列表為空時觸發。
          ended當目前的播放列表已結束時觸發。
          error當在音頻/視頻加載期間發生錯誤時觸發。
          loadeddata當瀏覽器已加載音頻/視頻的當前幀時觸發。
          loadedmetadata當瀏覽器已加載音頻/視頻的元數據時觸發。
          loadstart當瀏覽器開始查找音頻/視頻時觸發。
          pause當音頻/視頻已暫停時觸發。
          play當音頻/視頻已開始或不再暫停時觸發。
          playing當音頻/視頻在因緩沖而暫停或停止后已就緒時觸發。
          progress當瀏覽器正在下載音頻/視頻時觸發。
          ratechange當音頻/視頻的播放速度已更改時觸發。
          seeked當用戶已移動/跳躍到音頻/視頻中的新位置時觸發。
          seeking當用戶開始移動/跳躍到音頻/視頻中的新位置時觸發。
          stalled當瀏覽器嘗試獲取媒體數據,但數據不可用時觸發。
          suspend當瀏覽器刻意不獲取媒體數據時觸發。
          timeupdate當目前的播放位置已更改時觸發。
          volumechange當音量已更改時觸發。
          waiting當視頻由于需要緩沖下一幀而停止時觸發。

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!


          主站蜘蛛池模板: 成人国内精品久久久久一区| 精品视频一区在线观看| 精品国产毛片一区二区无码| 无码少妇一区二区性色AV| 国产成人免费一区二区三区| 亚洲视频一区在线| 国产AⅤ精品一区二区三区久久| 精品一区二区三区无码免费视频| 国产一区二区三区亚洲综合 | 日本一区免费电影| V一区无码内射国产| 大香伊人久久精品一区二区| 中文字幕一区视频一线| 精品国产一区二区三区久久狼| 人妻AV一区二区三区精品| 亚洲片一区二区三区| 日韩精品久久一区二区三区| 精品无码av一区二区三区| 免费一区二区无码东京热| 琪琪see色原网一区二区| 97人妻无码一区二区精品免费 | 久久人做人爽一区二区三区| 红桃AV一区二区三区在线无码AV| 精品日韩一区二区三区视频| 久久毛片一区二区| 精品无码AV一区二区三区不卡 | 国产中的精品一区的| 国产成人亚洲综合一区| 少妇无码一区二区三区免费| 在线观看国产区亚洲一区成人| 无码日韩人妻AV一区免费l| 日韩色视频一区二区三区亚洲| 无码人妻精品一区二区三区久久久| 亚洲第一区在线观看| 久久国产一区二区三区| 乱中年女人伦av一区二区| 欧美激情一区二区三区成人| 国产精品福利一区二区| 人妻无码视频一区二区三区| 久久精品国产一区二区三区肥胖| 丝袜人妻一区二区三区|