前端开发系列039-基础篇之Video基础

王无敌 發表於 2022-12-12 10:01:00

前端开发系列039-基础篇之Video基础

<blockquote>
本文简单介绍HTML5中的video标签，包括video元素的简单介绍、基本使用以及常用事件和属性。
</blockquote>
<h2 id="一标签介绍">一、标签介绍</h2>
HTML5 规定了一种通过 Video 元素来包含视频的标准方法。
Video标签用于在浏览器中提供视频控件来播放视频，示例为：<code><video src="movie.ogg" controls="controls"></video></code>,其中controls 属性提供添加播放、暂停和音量等控制，如果当前浏览器不支持video元素则显示video标签之间的内容。
video标签的主要属性
height 约束视频的高度。
src 规定要播放的视频的 URL。
autoplay规定视频就绪后马上开始播放（自动播放视频）。
width 约束视频的宽度。（注意：<code>无法通过缩小视频的宽高来压缩视频</code>）
loop 规定当视频结束后将重新开始播放 , 如果设置该属性，则视频将循环播放。
preload 规定是否在页面加载后载入视频，如果设置了 autoplay 属性，则忽略该属性。
muted 规定视频的音频输出应该被静音，在高版本浏览器中，静音可以保证视频自动播放。
controls规定浏览器应该为视频提供播放控件包括：播放暂停定位音量全屏切换字幕等。
preload属性的取值有三种情况
<code>auto</code> - 当页面加载后载入整个视频
<code>meta</code> - 当页面加载后只载入元数据
<code>none</code> - 当页面加载后不载入视频
Video元素支持三种视频格式
<code>Ogg</code> = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
<code>WebM</code> = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
<code>MPEG4</code> = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
<div class="tip">Internet Explorer 8 不支持 video 元素</div>
<h2 id="二基本使用">二、基本使用</h2>
video标签的使用方式相对简单，只需要在页面中指定位置插入video标签并设置必要的属性即可，下面给出一个简短的代码示例：
<pre><code class="language-html"><video muted src="src/僵小鱼.mp4" autoplay="autoplay" width="600"controls="controls">
您当前的浏览器不支持该控件，请升级浏览器！
</video>
</code></pre>
说明 上面的代码会在页面中插入一个宽度为600的视频控件，<code>src属性</code>控制的是播放视频的资源路径，<code>autoplay</code>表示设置自动播放，<code>controls</code>表示为标签提供对用的播放控件，<code>muted属性</code>表示设置让视频静音（自动播放必须设置该属性）。
source 元素说明
video 元素允许多个 <code>source</code> 元素，source 元素可以链接不同的视频文件，浏览器将使用第一个可识别格式的文件，下面给出简短的代码示例。
<pre><code class="language-html"><video width="320" height="240" controls="controls">
 <source src="movie.ogg" type="video/ogg">
 <source src="movie.mp4" type="video/mp4">
 您的浏览器不支持当前控件！
</video>
</code></pre>
<h2 id="三属性方法和事件">三、属性、方法和事件</h2>
video元素同样拥有属性、方法和事件。
video元素的方法包括<code>播放play()</code>、<code>暂停pause()</code>、<code>加载load()</code>
video元素的属性包括<code>是否静音（muted）</code>、<code>是否自动播放（autoPlay）</code>等，可以被读取或设置。
video元素相关的DOM 事件还能够帮我们监听视频<code>音量改变（volumechange）</code>、<code>播放结束（ended）</code>等。
下面给出一个简短的代码示例，通过按钮可以来控制视频的播放、暂停和放大缩小。
<pre><code class="language-html"><video src="src/僵小鱼.mp4" width="600px" id="my_video"></video>
<div class="control-video">
<button id="play_pause">播放</button>
<button id="make_big">放大</button>
<button id="make_small">缩小</button>
</div>

<script>
var media = document.getElementById("my_video");
var playPauseBtn = document.getElementById("play_pause");
var makeBigBtn = document.getElementById("make_big");
var makeSmallBtn = document.getElementById("make_small");

playPauseBtn.onclick = function () {
 if (media.paused)
 {
 this.innerHTML = "暂停";
 media.play();
 }else
 {
 this.innerHTML = "播放";
 media.pause();
 }
};
makeBigBtn.onclick = function () {
 media.width += 50;
};

makeSmallBtn.onclick = function () {
 media.width -= 50;
}
</script>
</code></pre>
video元素的属性列表
readyState 当前状态
paused 是否暂停
controls 是否有默认控制条
currentSrc 当前资源的URL路径
src 设置或返回资源的URL
startTime 开始时间，通常为0
volume 音量,可以设置（<code>0~1</code>）
ended 是否结束，布尔类型值
autoPlay 是否自动播放，布尔类型值
loop 是否循环播放，布尔类型值
muted 是否静音，布尔类型值，可以设置
error 错误信息，<code>null表示正常</code>
buffered 返回已缓冲区域，TimeRanges
seeking 是否正在seeking（查找）
currentTime 当前播放的位置，可以设置修改
duration 当前资源长度，流则返回无限
played 返回已经播放的区域，TimeRanges
seekable 返回可以seek的区域 TimeRanges
defaultPlaybackRate默认的回放速度，可以设置
playbackRate 当前播放速度(比如可以设置为1.5倍速度)，可以设置
error.code 错误信息，具体的代码 <code>1-用户终止 2-网络错误 3-解码错误 4-URL无效</code>
preload 是否预载资源取值情况有 none：不预载 metadata：预载资源
networkState 当前网络状态，结果为数值 <code>0-未初始化 1-未使用网络 2-正下载 3-没找到资源</code>
TimeRanges 区域对象
TimeRanges.length 区域段数
TimeRanges.start(index)第index段区域的开始位置
TimeRanges.end(index) 第index段区域的结束位置
video元素的方法列表
<pre><code>media.play(); 播放视频
media.pause(); 暂停视频
media.load(); 重新加载src指定的资源
media.canPlayType(type); 是否能播放某种格式的资源
</code></pre>
说明：<code>media</code>为获取到的页面中的video标签
video元素相关的事件
<pre><code>var eventTester = function(e){
Media.addEventListener(e,function(){//.....},false);
}

eventTester("loadstart"); 客户端开始请求数据
eventTester("progress"); 客户端正在请求数据
eventTester("suspend"); 延迟下载
eventTester("abort"); 客户端主动终止下载（不是因为错误引起）
eventTester("loadstart"); 客户端开始请求数据
eventTester("progress"); 客户端正在请求数据
eventTester("suspend"); 延迟下载
eventTester("abort"); 客户端主动终止下载（不是因为错误引起），
eventTester("error"); 请求数据时遇到错误
eventTester("stalled"); 网速失速
eventTester("play"); play()和autoplay开始播放时触发
eventTester("pause"); pause()触发
eventTester("loadedmetadata");成功获取资源长度
eventTester("loadeddata"); 成功获取数据信息
eventTester("waiting"); 等待数据，并非错误
eventTester("playing"); 开始回放
eventTester("canplay"); 可以播放，但中途可能因为加载而暂停
eventTester("canplaythrough");可以播放，歌曲全部加载完毕
eventTester("seeking"); 寻找中
eventTester("seeked"); 寻找完毕
eventTester("timeupdate"); 播放时间改变
eventTester("ended"); 播放结束
eventTester("ratechange"); 播放速率改变
eventTester("durationchange");资源长度改变
eventTester("volumechange"); 音量改变
</code></pre>

</div>
<div id="MySignature" role="contentinfo">
<div>原创文章，访问个人站点文顶顶以获得更好的阅读体验。</div>
<div>版权声明：著作权归作者所有，商业转载请联系文顶顶获得授权，非商业转载请注明出处。</div> 
来源：https://www.cnblogs.com/wendingding/p/16975327.html

頁: [1]

琼殿技术论坛's Archiver

前端开发系列039-基础篇之Video基础