多媒体

来源：互联网发布：unity3d 粒子系统编辑：程序博客网时间：2024/06/10 10:42

Html5页面多媒体

在html4中实现视频播放，必须使用object和embed元素，需要添加许多属性和参数，还需要使用三方插件（flash）html5中新增了video（用于视频播放）和audio元素（音频播放）,且不需要使用任何插件

当浏览器不支持audio、video元素，显示指定文字

除此之外，还可以是由source元素为一个媒体数据指定多个播放格式和编码方式======>确保浏览器从中选择一种支持格式进行播放，选择顺序为书写顺序

source元素属性：
src—:媒体播放url地址
type—:媒体类型，属性值为boff文件的MIME类型，属性中的codecs参数表示所用媒体编码格式。

vedio和audio元素属性差不多：

属性属性值 autoplay 当页面加载是自动播放 preload 预加载，浏览器会提将视频和音频数据进行缓冲，加快播放速度，该属性值有：none(表示不预加载)、metadata(表示只预加载媒体的元数据（媒体字节数、第一帧、播放列表、持续时间等）)、auto(表示预加载全部音频和视频) poster(video元素独有) 当视频不能播放时，可以使用一副图片替代，以免展示视屏的区域出现一片空白 loop 指示是否循环播放视频和音频 contols 指示是否为音频和视频添加浏览器自带的播放控制条（具有暂停、播放等按钮） width（vedio独有）宽（以像素为单位） height（vedio独有）高 error 读取媒体数据时，正常情况，该属性为null,但只要出现错误，就返回一个MediaError对象，p该对象的code属性返回对应错误状态 networkState 在多媒体数据加载过程中读取当前网络状态，属性值:Network_empty(0):元素处于初始状态 network_idle(1)：浏览器已经选择好媒体的编码格式，但还未建立网络连接 network_loading(2):媒体数据加载中 network_no_source:没有支持的编码格式，不执行加载 currentSrc（只读属性）读取播放中媒体数据的url地址 buffered 返回一个实现TimeRanges接口的对象，以确认媒体是否缓存媒体数据。该对象表示一段时间范围 paused（只读属性）属性值为布尔值，true：表示暂停播放，false:表示媒体正在播放 ended（只读属性）布尔值，true:播放完 played（只读属性）返回一个TimeRanges对象，从该对象中读取媒体文件的以播部分的时间段，开始时间为已播部分的开始时间，结束时间为已波部分的结束时间，一般是一个单一的0开始的范围，但浏览器发出Range Requests请求，这是该对象有多个时间范围。该对象有一个length属性（表示有多少个时间范围，一般为1，不存在时间范围时为0），以及两个方法start(index)和end(index),一般index设为0. readyState(只读属性) 媒体当前播放位置的就绪状态 seeking 布尔值，表示浏览器是否正在请求某一特定播放位置数据，true:浏览器正在请求，false:停止请求 seekable 返回一个TimeRanges对象，表示请求到的数据的时间范围，开始时间：为请求到到视频数据的第一帧的时间，结束时间：请求到数据最后一帧的时间 duration 媒体文件播放总的时间 currentTime 读取和播放当前媒体播放位置 startTime 读取媒体播放的开始时间，通常为0 defaultPlaybackRate 读取和修改媒体默认的播放速率 playbackRate 读取或修改媒体当前播放速率 volume 读取或修改媒体的播放速率范围0-1，0表示静音，1表示最大音量 muted 读取或者修改媒体的静音状态，布尔值，true：静音

比如：

    <audio src="2.mp3" autoplay preload="auto" controls poster="1.jpg">当前浏览器不支持audio元素</audio><br>   <video src="1.avi" width="200" height="200" autoplay poster="1.jpg" loop controls>当前浏览器不支持videoy元素</video>

效果图：

使用的火狐浏览器，但不支持avi格式视频

多媒体元素方法

控制播放主要三种方法：
1. 播放

 media.play(),将media。paused值强行改为false

2. 暂停

media.pause()暂停视频，将media.paused值该为true

重新载入
media.load()重新载入视频，将media.playbackRate值设为media.deaultPalybackRate的值，并且将media.error的值设为null
比如不使用浏览器只带的控制条，是自己是都实现播放控制：

        <!doctype html>    <html>    <head>    <meta charset="utf-8">    <title>播放控制</title>        <script>       var vedio;       function init(){           vedio=document.getElementById("vedio");           }       function play(){           vedio.play();           }        function pause(){            vedio.pause();            }            function load(){                vedio.load();                }        </script>    </head>    <body onLoad="init()" >        <video  id="vedio" src="1.avi" width="200" height="200"  poster="1.jpg" loop >当前浏览器不支videoy元素</video>        <input type="button" value="播放" onClick="play()"/>        <input type="button" value="暂停" onClick="pause()"/>    </body>    </html>

通过点击播放、暂停按钮实现播放控制

媒体元素的事件

对播放数据，触发的一系列诗经捕捉处理
1. 方式一：添加监听（addEventListenner(事件名，处理函数，处理方法)）

vedio或audio.addEventListener(type,listener,useCapture)type:事件名listner:绑定的函数useCaptrue:为布尔值，表示事件响应顺序true：浏览器采用captrue响应方式；false:采用bubbing方式，默认为false

方式二：直接赋值-事件处理方法为js脚本中常用的获取事件句柄的方式，比如：

        <vedio id="vedio1" src="1.mov" onplay="begin_playing"></vedio>        function begin_playing(){        ........        }

0 0