html5之多媒体详细介绍

黄舟
Lepaskan: 2017-03-15 16:12:21
asal
2127 orang telah melayarinya

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>
Salin selepas log masuk




Atas ialah kandungan terperinci html5之多媒体详细介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!