首頁 > web前端 > H5教程 > 主體

html5之多媒體詳細介紹

黄舟
發布: 2017-03-15 16:12:21
原創
2126 人瀏覽過

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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!