HTML5 플러그인이 필요 없는 멀티미디어 미디어-오디오 및 비디오에 대한 자세한 소개

黄舟
풀어 주다: 2017-03-11 16:02:16
원래의
2933명이 탐색했습니다.

오디오와 비디오가 점점 인기를 얻고 있습니다
크로스 브라우저 호환성을 보장하기 위해
여전히 다양한 웹사이트에서 플래시를 사용하고 있습니다


(소스 코드 촬영 Youku에서)

멀티미디어 태그

HTML5를 사용하면 오디오와 비디오라는 두 개의 멀티미디어 태그가 추가됩니다.
호환성이 꽤 좋은 IE는 지원하지 않습니다.
예 브라우저 플러그인을 사용하지 않고도 오디오 및 비디오 컨트롤을 삽입할 수 있으며
매우 간단합니다


(Bilibili에서 가져온 소스 코드)

요소는 다음과 같이 사용됩니다:

<audio src="media/xi-Halcyon.mp3" id="demoAudio">不支持H5-audio</audio>
<video src="media/Animation.mp4" id="demoVideo">不支持H5-video</video>
로그인 후 복사

태그의 내용이 브라우저에서 지원되지 않으면 표시됩니다
물론 , 이 두 요소를 사용할 때
적어도 src 속성을 추가하면 속성 값이 리소스의 URL이 됩니다

그러나 저작권 문제로 인해 각 브라우저는 서로 다른 미디어 형식을 지원합니다
그래서 사용할 수 있습니다 다음 방법

<audio id="demoAudio">
    <source src="media/xi-Halcyon.mp3">
    <source src="media/xi-Halcyon.ogg">    ...
    不支持H5-audio
</audio>

<video id="demoVideo">
    <source src="media/Animation.mp4">
    <source src="media/Animation.webm">    ...
    不支持H5-video
</video>
로그인 후 복사

다른 리소스 형식을 지정
다양한 브라우저의 호환성도 보장

속성

src 외에도 오디오 및 비디오 태그
공개 속성도 있습니다

属性描述
autoplay设置该属性后,音/视频资源就绪后立即播放
controls设置该属性后,则显示浏览器播放控制控件
loop设置该属性后,则音/视频结束后重新循环开始播放
preload设置该属性后,则音/视频在页面加载时进行加载,并预备播放(使用autoplay会忽略该属性)


前三个属性属性名与属性值相同,直接添加属性名即可
preload有如下属性值

  • none 不加载数据

  • metedata 仅加载元数据(时长、比特率、帧大小等)

  • auto 浏览器加载它认为适量的媒体内容

比如想要在浏览器添加一段音乐
并且加载后立即播放,循环播放
使用浏览器的播放控件

<audio src="media/xi-Halcyon.mp3" id="demoVideo" autoplay controls loop></audio>
로그인 후 복사

控件的样式各个浏览器都不一样
随着浏览器版本的更新,可能还会更新样式


video元素还有独有的属性poster
属性值是图片资源的url
用来设置视频播放前的一张占位图片

<video src="media/Animation.mp4" id="demoVideo" width="500" height="400" poster="images/preimg.jpg" controls></video>
로그인 후 복사


点击播放后,视频正常播放

脚本化音视频

元素

使用js获取dom节点就很简单了

var a = document.getElementById(&#39;demoAudio&#39;);var v = document.getElementById(&#39;demoVideo&#39;);
로그인 후 복사

类似于image的Image构造函数
Audio也可以通过类似的方式创建(Video不可以)
区别在于Image创建的图片是要插入文档的
但是Audio不需要

var a = new Audio(&#39;song.mp3&#39;);
로그인 후 복사

然后可以为它添加autoplay、loop等属性
然后添加到页面

接口

在获取的DOM节点上可以使用浏览器提供的接口属性和方法
常用的属性、方法如下

  • currentSrc 媒体数据的URL地址

  • volume 播放音量

    • 介于0~1(注意超范围会报错),默认1最大音量

  • muted 是否静音

    • 设置true进入静音模式

  • playbackRate 媒体播放速度

    • 默认1.0常速,>1快进,<1慢放(负值表回放但无浏览器实现此功能)

  • defaultPlaybackRate 媒体默认的播放速度

  • currentTime 当前播放时间(单位s)

  • duration 媒体时长(单位s)

  • play() 播放音/视频

  • pause() 暂停音/视频

  • load() 重新加载音/视频(通常用于修改元素属性后)


除此之外还有

  • played 已经播放的时间段

  • buffered 已经缓冲的时间段

  • seekable 用户可以跳转的时间段

它们都是TimeRanges对象
每个对象都有一个length属性(表示当前时间段)
以及start()和end()方法(返回当前时间段的起始时间点和结束时间点,单位s)
start()和end()都有一个数字参数,表示第一个时间段
确定当前缓存内容百分比:

var percentLoaded = Math.floor(song.buffered.end(0)/song.duration*100)
로그인 후 복사

下面三个布尔属性表示媒体播放器的状态

  • paused 是否暂停

  • seeking 是否正调到一个新的播放点

  • ended 是否播放结束并停止


并不是所有浏览器都支持video和audio的所有编解码器
canPlayType()方法就是用来鉴定时候支持某一格式的媒体资源
返回字符串maybe、probably或空字符串
如果只传入MIME类型,则返回maybe
如果同时传入MIME类型和编解码器,则返回probably(可能性增加了)
只是因为媒体文件只不过是音/视频的容器
真正决定文件能否播放的还得是编码格式

console.log(a.canPlayType(&#39;audio/mp4&#39;)); 
//maybeconsole.log(a.canPlayType(&#39;audio/mp4;codecs="mp4a.40.2"&#39;)); 
//probably
로그인 후 복사

下面的状态位属性也了解一下

  • readyState 就绪状态

    • 0 = HAVE_NOTHING - 没有关于音/视频是否就绪的信息

    • 1 = HAVE_METADATA - 关于音频/视频就绪的元数据

    • 2 = HAVE_CURRENT_DATA - 关于当前播放位置的数据是可用的,但没有足够的数据来播放下一帧/ms

    • 3 = HAVE_FUTURE_DATA - 当前及至少下一帧的数据可用

    • 4 = HAVE_ENOUGH_DATA - 可用数据足以开始播放

  • netWorkState 网络状态

    • 0 = NETWORK_EMPTY - 音/视频尚未初始化

    • 1 = NETWORK_IDLE - 音/视频是活动的且已选取资源,但并未使用网络

    • 2 = NETWORK_LOADING - 浏览器正在下载数据

    • 3 = NETWORK_NO_SOURCE - 未找到音/视频来源

  • error.code 错误状态

    • 1 = MEDIA_ERR_ABORTED - 取回过程被用户中止

    • 2 = MEDIA_ERR_NETWORK - 当下载时发生错误

    • 3 = MEDIA_ERR_DECODE - 当解码时发生错误

    • 4 = MEDIA_ERR_SRC_NOT_SUPPORTED - 不支持音频/视频

事件

除了接口属性方法以外
还有必不可少的事件模型
如果我们不想使用浏览器的控件而是定义自己的播放控制组件
就要使用这套事件了

  • play 播放时触发

  • pause 暂停时触发

  • loadedmetadata 浏览器获取完媒体元数据时触发

  • loadeddata 浏览器加载完当前帧媒体数据时触发

  • ended 播放结束后停止时触发

初次之外还有很多事件
很多不常用
在w3c截了一张图


通过接口与事件
也可以简单的实现自己简陋的音乐播放器

<button id="btn">播放</button><span id="cur">0s</span>/<span id="dur">0s</span><br>音量:<input type="range" id="vol">
로그인 후 복사
var audio = new Audio(&#39;media/xi-Halcyon.mp3&#39;);
var btn = document.getElementById(&#39;btn&#39;);
var vol = document.getElementById(&#39;vol&#39;);
var cur = document.getElementById(&#39;cur&#39;);
var dur = document.getElementById(&#39;dur&#39;);var state = &#39;pause&#39;;

vol.value = 100;
audio.onloadeddata = function(){
  dur.textContent = Math.floor(audio.duration) + &#39;s&#39;;
}

setInterval(function(){
  cur.textContent = Math.floor(audio.currentTime) + &#39;s&#39;;
}, 200);

btn.onclick = function(){
  if(state === &#39;play&#39;){
    state = &#39;pause&#39;;
    btn.textContent = &#39;播放&#39;;
    audio.pause();
  }else{
    state = &#39;play&#39;;
    btn.textContent = &#39;暂停&#39;;
    audio.play();
  }
}


vol.oninput = function(){
  audio.volume = vol.value/100;
}
로그인 후 복사

위 내용은 HTML5 플러그인이 필요 없는 멀티미디어 미디어-오디오 및 비디오에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿