html5之多媒體詳細介紹-H5教程-PHP中文網

首頁

web前端

H5教程

html5之多媒體詳細介紹

黄舟

Mar 15, 2017 pm 04:12 PM

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()—取得瀏覽器是否能播放特定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 &#39;play&#39;:
                    mediaElem.play();
                    break;
                case &#39;pause&#39;:
                    mediaElem.pause();
                    break;
            }
        }
    </script>

</body>
</html>

以上是html5之多媒體詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

H5代碼示例：實際應用和教程Apr 25, 2025 am 12:10 AM

H5提供了多種新特性和功能，極大地增強了前端開發的能力。 1.多媒體支持：通過和元素嵌入媒體，無需插件。 2.畫布（Canvas）：使用元素動態渲染2D圖形和動畫。 3.本地存儲：通過localStorage和sessionStorage實現數據持久化存儲，提升用戶體驗。

H5和HTML5之間的連接：相似性和差異Apr 24, 2025 am 12:01 AM

H5和HTML5是不同的概念：HTML5是HTML的一個版本，包含新元素和API；H5是基於HTML5的移動應用開發框架。 HTML5通過瀏覽器解析和渲染代碼，H5應用則需要容器運行並通過JavaScript與原生代碼交互。

H5代碼的基礎：密鑰元素及其目的Apr 23, 2025 am 12:09 AM

HTML5的關鍵元素包括、、、、、等，用於構建現代網頁。 1.定義頭部內容，2.用於導航鏈接，3.表示獨立文章內容，4.組織頁面內容，5.展示側邊欄內容，6.定義頁腳，這些元素增強了網頁的結構和功能性。

HTML5和H5：了解常見用法Apr 22, 2025 am 12:01 AM

HTML5和H5沒有區別，H5是HTML5的簡稱。 1.HTML5是HTML的第五個版本，增強了網頁的多媒體和交互功能。 2.H5常用於指代基於HTML5的移動網頁或應用，適用於各種移動設備。

HTML5：現代網絡的基礎（H5）Apr 21, 2025 am 12:05 AM

HTML5是超文本標記語言的最新版本，由W3C標準化。 HTML5引入了新的語義化標籤、多媒體支持和表單增強，提升了網頁結構、用戶體驗和SEO效果。 HTML5引入了新的語義化標籤，如、、、等，使網頁結構更清晰，SEO效果更好。 HTML5支持多媒體元素和，無需第三方插件，提升了用戶體驗和加載速度。 HTML5增強了表單功能，引入了新的輸入類型如、等，提高了用戶體驗和表單驗證效率。

H5代碼：編寫清潔有效的HTML5Apr 20, 2025 am 12:06 AM

如何寫出乾淨高效的HTML5代碼？答案是通過語義化標籤、結構化代碼、性能優化和避免常見錯誤。 1.使用語義化標籤如、等，提升代碼可讀性和SEO效果。 2.保持代碼結構化和可讀性，使用適當縮進和註釋。 3.優化性能，通過減少不必要的標籤、使用CDN和壓縮代碼。 4.避免常見錯誤，如標籤未閉合，確保代碼有效性。