課時53.video標簽(掌握)

這節課來學習一下html5中新增的標簽,我們先來看一下,html5中新增了哪些標簽?

打開W3school的網頁,點擊參考手冊中的HTML/HTML5標簽,有一個按字母順序排列的標簽,但凡標簽后面帶有5標記的,都是html5新增的標簽。

而有一些標簽是css才用到的,這里先不學

有一些是用不到的,如command標簽,五大瀏覽器都不支持,所以也不用學習

這節課主要學習了一個html5中的標志性標簽,video標簽,為什么video標簽是html5的標志性標簽呢?

因為在html5以前,html只能處理兩種數據,一種是文本數據,一種是圖片數據

1.什么是video標簽?

作用:

播放視頻

格式:

<video src=""></video>

video標簽的屬性:

src:用于告訴video標簽需要播放的視頻地址

autoplay:用于告訴video標簽是否需要自動播放視頻

controls:用于告訴video標簽是否需要顯示控制條

poster:用于告訴video標簽視頻沒有播放之前顯示的占位圖片

loop:一般用于做廣告視頻,用于告訴video標簽視頻播放完畢之后是否需要循環播放

<video src=""images/test.mp4 autoplay="autoplay" loop="loop"></video>

如果是廣告視頻,不需要controls,poster,因為就是要讓用戶關閉不了,不能靜音,只能不停的看

preload:預加載視頻,但是需要注意preload與autoplay相沖,如果設置了autoplay屬性,那么preload屬性就會失效(因為都已經開始播放了,就沒必要預加載了)

muted:靜音

width/height:和img標簽中的一摸一樣,兩個都設置可能會導致變形,所以只推薦設置一個

本文轉載于:猿2048?https://www.mk2048.com/blog/blog.php?id=c2ijhhj&title=課時53.video標簽(掌握)

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/370331.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/370331.shtml
英文地址,請注明出處:http://en.pswp.cn/news/370331.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Date函數基礎知識整理

Date類型&#xff1a;1.Date.parse()接收一個表示日期的字符串參數&#xff0c;然后再根據這個字符串返回響應的日期的毫秒數&#xff1b;如&#xff1a;創建一個日期&#xff1a; 1 <script> 2 // var someDatenew Date(May 25,2004); 3 // console.log(someDate);//Tue…

Google Guava –與Monitor同步

Google Guava項目是每個Java開發人員都應該熟悉的庫的集合。 Guava庫涵蓋I / O&#xff0c;集合&#xff0c;字符串操作和并發性。 在這篇文章中&#xff0c;我將介紹Monitor類。 Monitor是一種同步構造&#xff0c;可以在使用ReentrantLock的任何地方使用。 在任何時候&#x…

yaf 重寫index.php,php框架Yaf路由重寫實例代碼

通常為了友好的URL格式&#xff0c;會進行站點URL的重寫&#xff0c;可以在webserver(Nginx)的配置中進行rewrite&#xff0c;也可在在程序端進行&#xff0c;本文主要和大家介紹php框架Yaf路由重寫&#xff0c;給大家做個參考&#xff0c;希望能幫助到大家。以下使用Yaf框架進…

python類初始化導入庫_Python中optparser庫用法實例詳解

本文研究的主要是Python中optparser庫的相關內容&#xff0c;具體如下。一直以來對optparser不是特別的理解&#xff0c;今天就狠下心&#xff0c;靜下心研究了一下這個庫。當然了&#xff0c;不敢說理解的很到位&#xff0c;但是足以應付正常的使用了。廢話不多說&#xff0c;…

SQL--Chapter8--Working with Triggers and Transactions

Objectives:1.Implement triggers 2.Implement transactions 轉載于:https://www.cnblogs.com/Catherinezhilin/p/7979644.html

Canvas制作的下雨動畫

簡介 在codepen上看到一個Canvas做的下雨效果動畫&#xff0c;感覺蠻有意思的。就研究了下&#xff0c;這里來分享下&#xff0c;實現技巧。效果可以見下面的鏈接。 霓虹雨: http://codepen.io/natewiley/full/NNgqVJ/ 效果截圖&#xff1a; Canvas動畫基礎 大家都知道&…

在Eclipse中有效使用JUnit

最近&#xff0c;我被卷入了討論1和一些受感染的同伴2&#xff0c;他們關于我們如何在Eclipse IDE中使用JUnit 。 令人驚訝的是&#xff0c;對話帶來了并非所有人都知道的一些“技巧”。 這使我有了寫這篇文章的想法&#xff0c;總結了我們的演講。 誰知道–也許有人也有新事物…

jquery文件上傳控件 Uploadify

基于jquery的文件上傳控件&#xff0c;支持ajax無刷新上傳&#xff0c;多個文件同時上傳&#xff0c;上傳進行進度顯示&#xff0c;刪除已上傳文件。 要求使用jquery1.4或以上版本&#xff0c;flash player 9.0.24以上。 有兩個版本&#xff0c;一個用flash,一個是html5。html5…

imagick php 縮放,php使用imagick模塊實現圖片縮放、裁剪、壓縮示例

PHP 使用Imagick模塊 縮放&#xff0c;裁剪&#xff0c;壓縮圖片 包括gif圖片縮放 裁剪代碼如下:/*** 圖片裁剪* 裁剪規則&#xff1a;* 1. 高度為空或為零 按寬度縮放 高度自適應* 2. 寬度為空或為零 按高度縮放 寬度自適應* 3. 寬度&#xff0c;高度到不為空或為…

php實現第三方郵箱登錄_PHP實現用戶異地登錄提醒功能的方法

有時候你的網站賬號被盜或你在別處登錄操作后臺時&#xff0c;右下角會彈出提示信息&#xff0c;提醒你的賬號異地登錄&#xff0c;或者會被強制下線。對于這種安全性要求比較高的web網站&#xff0c;很多后臺管理都會做這種功能提醒。甄別自己的賬號是否被盜或者是否有另一個人…

課時47.datalist標簽(了解)

1.datalist標簽 作用&#xff1a;給輸入框綁定待選項 2.datalist格式&#xff1a; <datalist> <option>待選項內容</option> </datalist> 3.如何給輸入框綁定待選列表&#xff1f; 搞一個輸入框搞一個datalist列表給datalist列表標簽添加一個id給…

pandas.read_csv參數詳解

讀取CSV&#xff08;逗號分割&#xff09;文件到DataFrame也支持文件的部分導入和選擇迭代更多幫助參見&#xff1a;http://pandas.pydata.org/pandas-docs/stable/io.html參數&#xff1a;filepath_or_buffer : str&#xff0c;pathlib。str, pathlib.Path, py._path.local.Lo…

Gradle – Maven的觀點

正如我博客的讀者所知道的&#xff0c; 我有點像Maven迷 。 我從2007年8月左右開始使用Maven&#xff0c;從沒有回過頭。 但是&#xff0c;就像其他所有情況一樣&#xff0c;“變化是唯一不變的”。 現在這個領域還有其他參與者&#xff0c;Gradle看起來是最有前途的。 我決定試…

postgis安裝_從零開始,構建電子地圖網站:0_2_數據處理postgis

軟件安裝完&#xff0c;開始數據處理。從China Historical GIS下載一份數據。一、數據下載數據來源&#xff1a;China Historical GIS&#xff1a;https://sites.fas.harvard.edu/~chgis/data/chgis/v6/先下載一份時間序列數據&#xff1a;Download CHGIS V6 TIME SERIES Datah…

sar圖像去噪matlab,一種基于總曲率的SAR圖像變分去噪方法與流程

本發明屬于數字圖像處理技術領域&#xff0c;具體涉及一種基于總曲率的SAR圖像變分去噪方法。背景技術&#xff1a;&#xff1a;相干斑噪聲是合成孔徑雷達(Synthetic Aperture Radar&#xff0c;簡稱SAR)圖像的重要特征&#xff0c;嚴重影響SAR圖像的可解譯性。相干斑噪聲通常作…

Linux下用netstat查看網絡狀態、端口狀態

在linux一般使用netstat 來查看系統端口使用情況步。 netstat命令是一個監控TCP/IP網絡的非常有用的工具&#xff0c;它可以顯示路由表、實際的網絡連接以及每一個網絡接口設備的 netstat命令的功能是顯示網絡連接、路由表和網絡接口信息&#xff0c;可以讓用戶得知目…

課時2.瀏覽器和服務器(了解)

1.什么是瀏覽器&#xff1f; 瀏覽器就是由安裝在我們電腦上的一款軟件&#xff0c;QQ&#xff0c;百度影音等一樣&#xff0c;都是安裝在電腦上的一款軟件 那這些軟件之間由什么區別呢&#xff1f; 它們的區別就是它們的功能不太一樣&#xff0c;QQ是用來聊天的&#xff0c;…

微信自動回復

http://itchat.readthedocs.io/zh/latest/tutorial/tutorial0/。 這個是學習網址&#xff0c;到時候自己學一下。做個案例試試轉載于:https://www.cnblogs.com/lilinzhiyu/p/7985864.html

python 定義變量_用python解決動態的定義變量名(并給其賦值方法:大數據處理)...

前言&#xff1a;今天為大家帶來的內容是&#xff1a;用python解決動態的定義變量名(并給其賦值方法&#xff1a;大數據處理)具有很好的參考價值&#xff0c;希望對大家有所幫助。喜歡本文內容的記得點贊轉發收藏不迷路哦&#xff01;&#xff01;&#xff01;最近消費kafka數據…

appcan php圖片上傳,appcan文件上傳php,asp通用

首先說appcan內部實現了file標簽&#xff0c;我們就不用糾結這個問題了&#xff0c;還提供了上傳百分比哦&#xff0c;然后下面的方法按從上到下依次看&#xff0c;很簡單。上傳php&#xff0c;asp頁面很簡單 &#xff0c;接收‘file_data’這個文件信息就可以了&#xff0c;如…