本节学习目标
<video>组件的使用
他可以实现那些功能？
- 播放网络视频
- 设置播放或者暂停
- 自动播放
- 监测各种事件
- 支持多个
<video>同时播放多个视频 - controls在网页上显示工具条
- 唯一合法的子标签
<text>
话不多少直接进入主题
先写好基本内容
<template>
<div>
<video class="video" ></video>
</div>
</template>
<style scoped>
.video {
width: 630px;
height: 350px;
margin-top: 60px;
margin-left: 60px;
}
</style>
<script>
export default {
}
</script>
1.播放网络视频
下面是一个网络视频地址
http://flv2.bn.netease.com/videolib3/1611/01/XGqSL5981/SD/XGqSL5981-mobile.mp4
播放视频很简单值需要设置标签的src字段即可如下
<video class="video" src="http://flv2.bn.netease.com/videolib3/1611/01/XGqSL5981/SD/XGqSL5981-mobile.mp4"></vedio>
注意我上面的写法是把地址直接写死的,一般开发这个src值都是从网络获取的,所以我们要给它绑定变量如下
<video class="video" :src="src"></vedio>
解释
格式很简单,只需要在src前面添加: 即可,当然我们也可以不用这样的简写,完整的写法为
v-bind:src
2.设置视频的播放状态
设置标签的字典
play-status可以设的值为play或者pause
这个值决定播放器的播放状态,有了这个属性,我们就可以通过变量来控制播放器的播放了
<video class="video" :src="src" play-status='pause'></video>
3.设置自动播放
当我们打开页面的时候,是否让视频自动播放,我们可以通过两种方式解决
第一种.就是设置播放状态为play
<video class="video" :src="src" play-status='play'></video>
第二种 使用‘auto-play’字段
<video class="video" :src="src" auto-play='true'></video>
问题:如果我们同时设置了auto-play='true'和play-status='pause',播放器是播放还是暂停呢?
如果初次进入页面同时这个两这个值,会以'auto-play'为准,也就是自动播放
4.监测各种事件
事件主要有以下几种
start：当 playback 的状态是 Playing 时触发
pause：当 playback 的状态是 Paused 时触发
finish：当 playback 的状态是 Finished 时触发
-
fail：当 playback 状态是 Failed 时触发
<video class="video" :src="src" auto-play="false" @start="onstart" @pause="onpause" @finish="onfinish" @fail="onfail" play-status='pause'></video>
5.支持多个<video>同时播放多个视频
可能这个需求不是很常见,但是这个标签可以实现同时播放多个视频的需求
<template>
<div>
<video class="video" :src="src" ></video>
<video class="video" :src="src"></video>
<video class="video" :src="src" ></video>
</div>
</template>
controls网页上显示工具条
我们发现上面的截图没有工具条,这个是网页上的截图,手机上是有工具条的,原因很简单,如果你的标签就算没有添加controls字段,手机上的播放器也会显示工具条,因为原生的播放器不支持隐藏工具条功能,但是网页是支持这个属性的!那么怎么让网页显示这个工具条呢？
<video class="video" :src="src" controls></video>
<video class="video" :src="src" controls="controls"></video>
<video class="video" :src="src" controls></video>
注意
我使用了两种写法
controls或者controls='controls',都可以的
唯一合法的子标签 <text>
不过这个就是个坑,因为你设置了子标签,它会默认在视频的下面,如果你真的想要,给视频上放文字,如下面
你可以使用绝对定位方式将标签添加到视频组件的上层
<template>
<div>
<video class="video" :src="src" controls></video>
<text class="text">弹幕</text>
</div>
</template>
布局代码如下
<style scoped>
.video {
width: 630px;
height: 350px;
margin-top: 60px;
margin-left: 60px;
}
.text{
position: absolute; // 设置布局方式
top:60px; // 距离父视图上边距为60px
left: 60px; // 距离父视图左边距为60px
background-color: red;
}
</style>
关于视频组件暂时讲解到这里
