點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

html5之多媒體詳細介紹

來源：懂視網責編：小采時間：2020-11-27 15:11:31

html5之多媒體詳細介紹

html5之多媒體詳細介紹:1）video元素的屬性：autoplay——如果存在，此屬性會使瀏覽器盡可能立即開始播放視頻；preload="none"——用戶開始播放視頻之前不會載入視頻；preload="metadata"——用戶開始播放之前只能載入視頻的元數據；preload="

推薦度：

點擊下載本文 文檔為doc格式

導讀html5之多媒體詳細介紹:1）video元素的屬性：autoplay——如果存在，此屬性會使瀏覽器盡可能立即開始播放視頻；preload="none"——用戶開始播放視頻之前不會載入視頻；preload="metadata"——用戶開始播放之前只能載入視頻的元數據；preload="

1）video元素的屬性：

autoplay——如果存在，此屬性會使瀏覽器盡可能立即開始播放視頻；

preload="none"——用戶開始播放視頻之前不會載入視頻；

preload="metadata"——用戶開始播放之前只能載入視頻的元數據；

preload="auto"——請求瀏覽器盡快下載整個視頻。瀏覽器可以忽略這個請求。這是默認行為；

controls——除非此屬性存在，否則瀏覽器不會顯示播放控件；

loop——如果存在，此屬性會讓瀏覽器反復播放視頻；

poster——指定在視頻數據載入時顯示的圖片；

height——指定視頻的高度；

width——指定視頻的寬度；

muted——如果此屬性存在，視頻從以開始就會處于靜音狀態；

src——指定要顯示的視頻；

1.1）source元素：向瀏覽器提供備選視頻格式；

src——指定要顯示的視頻；

type——指定文件的MIME類型；

2）audio元素的屬性與video元素的屬性基本相同，不再贅述；

3）HTMLMediaElement對象的成員：

autoplay——獲取或設置autoplay屬性是否存在；

canPlayType(<type>)——獲取瀏覽器能否播放特定MIME類型的提示；

currentSrc——獲取當前的來源；

controls——獲取或設置controls屬性是否存在；

defaultMuted——獲取或設置muted屬性一開始是否存在；

loop——獲取或設置loop屬性是否存在；

muted——獲取或設置muted屬性是否存在；

preload——獲取或設置preload屬性的值；

src——獲取或設置src屬性的值；

volume——獲取或設置音量，范圍從0.0到1.0；

3.1）HTMLVideoElement對象的額外屬性：

height——獲取或設置height屬性的值；

width——獲取或設置width屬性的值；

videoHeight——獲取視頻的原始高度；

videoWidth——獲取視頻的原始寬度；

poster——獲取或設置poster屬性的值；

3.2）HTMLMediaElement對象的回放成員：

currentTime——返回媒體文件當前的回放點；

duration——返回媒體文件的總時長；

ended——如果媒體文件已經播放完畢則返回true；

pause()——暫停媒體回放；

paused——如果回放暫停則返回true，否則返回false;

play()——開始回放媒體；

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <title>上海遠地資產管理有限公司</title>
 <meta name="author" content="jason"/>
 <meta name="description" content="上海遠地資產管理有限公司（簡稱：遠地資產），是一家專業的互聯網金融服務平臺."/>
 <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
 <style type="text/css">
 table{
 border-collapse: collapse;
 border:thin solid black;
 }
 th,td{
 padding: 3px 4px;
 }
 body > *{
 float: left;
 margin: 2px;
 }
 </style>
</head>
<body>
 <video width="360" height="240" src="raw/timessquare.webm" autoplay controls preload="none" muted>

 </video>
 <video width="360" height="240" src="raw/timessquare.webm" controls preload="none" muted>
 視頻不能播放
 </video>
 <video width="360" height="240" src="raw/timessquare.webm" controls preload="metadata" muted>
 視頻不能播放
 </video>
 <video width="360" height="240" src="raw/timessquare.webm" controls preload="none" poster="images/poster.png">
 視頻不能播放
 </video>

 <video id="media" controls="controls" width="360" height="240">
 <source src="raw/timessquare.webm" type="video/webm"/>
 <source src="raw/timessquare.ogv" type="video/ogg"/>
 <source src="raw/timessquare.mp4" type="video/mp4"/>
 <embed src="http://player.youku.com/player.php/sid/XMTI3NjI2MzQ2MA==/v.swf"
 quality="high" width="360" height="240" align="middle" allowScriptAccess="always" allowFullScreen="true"
 mode="transparent" type="application/x-shockwave-flash">
 </embed>
 </video>
 <table id="info" border="1">
 <tr><th>Property</th><th>Value</th></tr>
 </table>
 <p>
 <button id="play">播放</button>
 <button id="pause">暫停</button>
 </p>
 <!--獲取媒體元素的基本信息
 <script type="text/javascript">
 var mediaElem=document.getElementById("media");
 var tableElem=document.getElementById("info");
 var propertyNames=["autoplay","currentSrc","controls","loop","muted","preload","src","volume"];
 for(var i=0;i<propertyNames.length;i++){
 tableElem.innerHTML+="<tr><td>"+propertyNames[i]+"</td><td>"+mediaElem[propertyNames[i]]+"</td></tr>";
 }
 </script>
 -->
 <script type="text/javascript">
 var mediaElem=document.getElementById("media");
 var buttons=document.getElementsByTagName("button");
 for(var i=0;i<buttons.length;i++){
 buttons[i].onclick=handleButtonPress;
 }
 function handleButtonPress(e){
 switch (e.target.id){
 case 'play':
 mediaElem.play();
 break;
 case 'pause':
 mediaElem.pause();
 break;
 }
 }
 </script>

</body>
</html>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

html5之多媒體詳細介紹

推薦度：

點擊下載本文 文檔為doc格式

標簽：介紹 html5 簡介

熱門焦點

html5之多媒體詳細介紹

html5之多媒體詳細介紹

html5之多媒體詳細介紹

最新推薦

猜你喜歡

熱門推薦