使用Vue构建视频播放列表

特别声明:小站已开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

这周有关于CSSConf Australia大会的视频已经放出来了。花了一天的时间看了一下视频,有些话题还是很有意思的。不过咱们今天要聊的不是这个大会中的事情。这不是在学Vue吗?总想给自己找点活干,练习练习Vue。我就在想,是不是可以把该大会的在YouTube上的视频列表效果给模拟出来。

既然想了,那就动手试试呗。比如咱们接下来要做的一个效果如下:

由于我们的视频和视频的相关信息都来源于YouTube上的CSSConf Australia。如果你看不到视频和缩略图之类的,你需要自备梯子!

构建环境

为了方便,咱们还是一如既往的在Codepen上来完成上图的一个效果。也是基于Vue来完成所要的效果(毕竟是用来练习Vue的嘛)。当然,如果你不想过渡的依赖于Codepen,那么你可以在本地构建该项目。比如直接使用Vue-cli构建工具来创建项目,然后可以通过多文件组件的方式来做。对于布局效果,咱们就不多说了,而且接下来的内容也不会过多的涉及有关于CSS的事情。简要的提一下,实现上述的布局效果,你可以使用Flexbox或者CSS Grid布局完成。

下面的代码都在Codepen上完成,如果你是在本地构建,特别是使用多文件组时,略有不同

创建视频播放组件

那我们就直接从创建组件开始吧。(如果你是在本地,假设你已构建好了Vue的环境)

通过<template>Vue.component()来创建一个名为video-player的Vue组件。

<template id="video-player">
    <div class="video-player">Welcome to CSSConf Australia</div>
</template>

Vue.component('video-player',{
    template: '#video-player'
})

事实上这个时候,你在浏览器中并看不到什么东西。那是因为,组件仅创建了(组件中只有一个最简单的标签,离目标甚远),并未调用。如果想要看到对应的效果,调用已创建的video-player组件,然后把Vue实例挂载到一个id名为#app的元素中:

<div id="app">
    <video-player></video-player>
</div>


let app = new Vue({
    el: '#app'
})

这时你所看到的效果如下,虽然添加了点样式,但还不能入眼:

创建数据

现在我们已经有了基本的架子,也在浏览器上能看到对应的效果,只不过没有我们所需要的数据。接下来我们创建Vue的 data对象,用来存储CSS Conf视频的相关信息。比如,我们创建一个名为videos的变量。

let videos = []

Vue.component('video-player', {
    template: '#video-player',
    data () {
        return videos
    }
})

现在videos还是一个空的数组。我们需要人肉的从YouTube上把有关于CSS Conf相关的8个视频的数据撸下来。在我们的示例中,每个video包含下面的几个字段:

  • id:视频序列号
  • title:视频标题
  • thumbnail:视频缩略图地址
  • youtubeURL:视频地址
  • speaker:视频演讲者
  • likes:点赞数
  • views:浏览数
  • describe
剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/vue/create-video-player-component.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部