html5之多媒体详细介绍

百变鹏仔 2个月前 (10-18) #H5教程

文章标签详细介绍

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之多媒体详细介绍

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集