欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

HTML5音视频标签介绍和使用

程序员文章站 2022-05-11 09:13:45
...

HTML5音视频

内容未整合完成,持续更新中…

  • 文章介绍内容:

    • audio/video音视频标签及常用属性
    • 音视频标签API事件
    • 自定义播放器
    • 第三方框架的使用(jquery等封装的)
  • 使用场景:网站的多媒体播放器

  • 背景:较早的多媒体网站使用的是flash,是第三方的插件,不仅不安全而且成本较高

  • 关于HTML5和flash播放器的优缺点,这篇文章写得还可以:
    HTML5和flash播放器的优缺点对比

video

支持的三种常见格式:mp4、webm、ogv

各个浏览器差异

  • safari只支持mp4
  • IE8(包含)以下不支持video标签
  • IE9支持video、但是只支持mp4
  • 欧朋、火狐、谷歌支持mp4、webm、ogv

怎样解决浏览器兼容问题?写法:

// 方法一,如果不支持的话,提示用户换浏览器
<video src="xxx.mp4">
	// 如果浏览器不支持,会提示以下文字
	您的浏览器不支持,请使用其他浏览器
</video>

// 方法二,用video下的source标签,如果浏览器对第一个source不兼容,那么会依次往下查找,直到兼容为止
<video controls>
	<source src="xxx.webm">// 如果不支持webm格式文件,就会往下查找
    <source src="xxx.mp4">// 如果mp4也不支持,那么就会显示下方文字
    // 如果浏览器不支持,会提示以下文字
	您的浏览器不支持,请使用其他浏览器
</video>

标签属性

  • src:视频连接
  • width:视频宽度
  • height:视频高度(width和height如果同时使用,播放器会拉伸,播放器会根据视频比例自适应,播放的内容不会拉伸,始终在中心位置)
  • controls:控制器
  • autoplay:自动播放,但是chrome下不会自动播放(如果有muted静音属性,chrome可以自动播放)
  • loop:循环播放,-1:无限轮播,2:轮播2次
  • poster:视频封面,未播放时候显示的图片,只有第一次加载时候才显示的图片,默认显示的是视频的第一帧
  • muted:静音播放

API

  • play():控制video标签,让其自动播放,但是在chrome下,不允许自动带声音的播放,chrome可以支持7s以内的视频自动播放

  • pause():和play一个用法

  • duration:视频的长度,单位毫秒,VideoNode.duration即可获得

  • currentTime:设置或者返回视频当前的一个播放长度,单位秒,可以结合用来设置快进功能

  • src:设置或返回视频的链接地址

  • volume:设置或返回视频的音量,范围0-1

  • controls:设置控制台是否显示

  • muted:设置是否静音,但是muted属性不会在标签显示

  • networkState:返回网络或者资源加载状态

  • networkState状态码:

    • 0:未初始化
    • 1:视频已经选好资源,但是未使用网络
    • 2:浏览器正在下载视频资源,边下边播
    • 3:未找到视频资源 ,在一开始的情况下 因为video 不会立即找到资源 所以也会以出现3
  • currentSrc:返回音视频的地址,必须是在音视频可以加载播放的时候才会返回,不可以赋值

  • ended:返回音视频是否播放结束,如果播放结束返回true,否则返回false,可以进行事件监听:

	videoNode.addEventListener("ended",function(){
    	console.log('视频结束')
    })
  • playbackRate:设置或者返回音频的播放速度,默认1

  • readyState:返回当前视频的就绪状态

  • readyState状态码:

    • 0:未就绪
    • 1:有数据,但是不足以支撑
    • 2:当前数据是可以用,但是下一帧没有
    • 3:数据正在缓冲 当前及下一帧至少是可用了
    • 4:可用数据足已开始播放
  • timeupdate:当目前的播放位置已更改时,可以添加监听事件,可以根据这个自行开发个进度条

	VideoNode.addEventListener('timeupdate', function(){
    	console.log(this.currentTime)
    })
  • seeked:当用户对视频进度条完成操作时候会触发的事件,拖动停止的时候触发,使用的时候必须用ON
	videoNode.onseeked = function(){
    	console.log("seeked...")
    }
  • seeking:当用户拖动进度条时候就会触发事件,和seeked不同的是,一个拖动时候触发,一个拖动停止的时候触发

  • volumeChange:当视频的声音发生改变时候,就会触发的时间,还是要必须用ON

  • RequestFullScreen:全屏,但是必须在用户事件中调用(click等),但是不同浏览器不兼容,兼容方案:

	button.onclick = function(){
    	if(VideoNode.webkitRequestFullscreen){
        	VideoNode.webkitReqeustFullscreen();
        }else if(VideoNode.mozRequestFullScreen){
        	VideoNode.mozRequestFullScreen();
        }
    }
相关标签: html5