多媒体

    xiaoxiao2021-03-26  14

    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(){ ........ }
    转载请注明原文地址: https://ju.6miu.com/read-500030.html

    最新回复(0)