【温馨提示】:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。
【项目地址】
项目采用Git进行管理,最终项目将会发布到GitHub中,感兴趣的小伙伴们可以一起学习,共同完善本项目。
项目地址:GitHub
第八节: 视频播放功能
回顾及介绍
在第五节中我们实现了视频列表及视频播放的组件,在这一章节中将进一步了解视频播放的自动播放、暂停、播放等功能的实现及详细解说。
视频播放组件详细地址:common/components/Vidoes。
视频播放器的配置介绍
1.autoplay:数据类型为bool类型,此参数的作用在于当打开浏览器后是否开始回放,若为true时,则回放;若为false时,则不回放。
2.muted:数据类型为bool类型,此参数是在默认情况下小长任何音频(视频声音)。若为true时,则消除;若为false时,则不消除。
3.loop:数据类型为bool类型,此参数作用于是否视频播放结束即重新开始播放。若为true时,则重新播放;若为false时,则不播放。
4.fluid:数据类型为bool类型,此参数作用于是否按比例缩放适应容器的大小,也可以表示为Video.js player将拥有流体大小。若为true时,则适应缩放;若为false时,则不适应缩放。
5.notSupportedMessage: 数据类型为字符类型,此参数为设置默认信息。意思是在视频无法播放时,显示默认信息。如:“此视频暂无法播放,请稍后再试”。
export default {
name: 'Videos',
props: ['video', 'index'],
data() {
return {
playerOptions: {
autoplay: false, // 如果true,浏览器准备好时开始回放。
muted: true, // 默认情况下将会消除任何音频。
loop