首页 > 代码库 > H5视频/音频

H5视频/音频

2024-10-08 10:15:38   217人阅读

video

 

 

1.1 标签原型

  • 指定一种视频格式，不能播就提示
  • <video id="media" src="123.mp4" width="500" poster="examp1.jpg" >
    您的浏览器不支持video
</video>
  • 给定多种视频格式，浏览器根据自身支持程度选择播放哪一种
  • 注意：多个source标签，浏览器会从第一个开始识别，如果第一个不被识别，则会继续识别第二个；如果第一个识别成功，则会直接播放第一种格式视频
  • <video controls = “controls”>

   <source src=”1.mp4” type=”video/mp4” />  //src属性写到source标签中，要指定视频的type类型，例如MP4的即为type=“video/mp4”

   <source src = “2.ogg” type=”video/ogg” />  //ogg格式

   <source src=”3.webm” type=”video/webm” />   //webm格式

</video>

 1.2 video属性

属性(常用)值功能描述
controls controls 是否显示播放控件
autoplay autoplay 设置是否打开浏览器后自动播放
width Pilex（像素） 设置播放器的宽度
height Pilex（像素） 设置播放器的高度
loop loop 设置视频是否循环播放（即播放完后继续重新播放）
preload preload 设置是否等加载完再播放
src url 设置要播放视频的url地址
poster imgurl 设置播放器初始默认显示图片
autobuffer autobuffer 设置为浏览器缓冲方式，不设置autoply才有效

1.3 Video 方法 

API事件说明
play video.play(); 播放视频
pause video.pause(); 暂停播放视频
load video.load(); 将全部属性回复默认值，视频恢复重新开始状态
canPlayType var support = videoid.canPlayType(‘video/mp4′); 

判断浏览器是否支持当前类型的视频格式

返回值：
        空字符串：不支持Maybe：可能支持Probably：完全支持 

 

 

1.4 视频控制

  • Media.volume = value; //音量
  • Media.muted = value; //静音
  • TimeRanges(区域)对象
  • TimeRanges.length; //区域段数
  • TimeRanges.start(index) //第index段区域的开始位置
  • TimeRanges.end(index) //第index段区域的结束位置
  • Media.controls;//是否有默认控制条

 

1.5 其他

  • 全屏:

    • element.webkitRequestFullScreen();( webkit)
    • element.mozRequestFullScreen(); (Firefox )
    • element.requestFullscreen(); (W3C )

  • 退出全屏：

    • document.webkitCancelFullScreen(); (webkit )
    • document.mozCancelFullScreen(); (Firefox)
    • document.exitFullscreen(); (W3C)

 

 html5 video 外挂字幕[webVTT]

 

html5 video 外挂字幕英文简称webVTT【video text track 网络视频文本轨道】，是一个以.vtt结尾的纯文本文件，里面会包含以下几种视频信息：

  1. 字幕subtitles > 关于对话的转译或者翻译
  2. 标题captions > 类似于标题，但是还包括音响效果和其他音频信息。
  3. 说明description > 预期为一个单独的文本文件，通过屏幕阅读器描述视频
  4. 章节chapters > 旨在帮助用户浏览整个视频
  5. 元数据metadata > 默认不打算展示给观众的、和视频有关的信息和内容。但是你可以使用Javascript来访问。

WebVTT内容

这里有一个标准的示例：

WEBVTT

1
00:00:13.000 --> 00:00:16.100
这里是字幕

2
00:00:16.100 --> 00:00:20.100
这里是第二行字幕

webvtt文件中的每一项为一个cue，每一个cue以箭头分割的开始时间和结束时间，cue对应的文本在下一行，每一个cue可以有一个id, cue的时间格式为 hours:minutes:seconds:milliseconds，必须严格遵守，时分秒必须为两位数字，不足的以0填补，毫秒必须是三位数字。

这个里有个.vtt文件的格式校验器https://quuz.org/webvtt/?spm=5176.100239.blogcont4269.7.kKaynO

 

 audio

 

2.1 HTML5 音频

  • 常见的音频格式
    • 音频编码：ACC、MP3、Vorbis

  • HTML5支持的音频格式：

    • Ogg 免费 支持的浏览器:C、F、O
    • MP3 收费 支持的浏览器: I、C、S
    • Wav 收费 支持的浏览器: F、O、S

 

 

2.2标签创建

audio元素创建

<audio controls src="123.mp3">
</audio>

audio source元素

<audio controls>
        <source src="123.mp3">
        <source src="123.ogg">
    </audio>

 

2.2 audio 属性

  • autoplay 自动播放

  • controls 向用户显示播放控件

  • loop 循环

  • preload 是否等加载完再播放

  • src 要播放的音频的 URL

 

H5视频/音频


联系
我们