【vue】video结合cyberplayer.js实现flv视频播放

FloraCat_染小白

于 2019-02-22 15:12:44 发布

阅读量4.8k

点赞数

分类专栏：前端项目实践 JavaScript

本文链接：https://blog.csdn.net/u014322206/article/details/87878499

版权

本文介绍了如何在Vue项目中利用cyberplayer.js播放FLV视频。首先，解释了由于<video>标签不支持FLV格式，所以需要结合cyberplayer.js来实现播放。接着，详细步骤包括下载库、在HTML中引入、在Vue组件中使用<video>标签以及在JS中实现播放功能。然后，文章展示了在实际项目中，如何在Vue组件间传递动态播放地址，并通过watch监听以及在beforeDestroy()中清除视频，避免声音残留问题。

摘要由CSDN通过智能技术生成

一、原理

H5新增的<video>标签可以用于视频播放，但格式有限，播放不了直播生成的.flv视频。

那么可以结合cyberplayer.js来实现.flv视频播放，简单粗暴。原理如下：

① 下载该库，并在index.html中引入

<script type='text/javascript' src="./static/js/cyberplayer-3.4.1/cyberplayer.js"></script>

② 在组件模板中使用<video>通过id占位。

<video id="myPlayer" poster="" controls playsInline webkit-playsinline autoplay>
</video>

③在js中实现视频播放

var player = cyberplayer("myPlayer").setup({
            width : 788,
            height : 546,
            backcolor : "#FFFFFF",
            stretching : "fill",
            file : this.videoAdress,  //视频url，这里是调用接口返回的
            ak : "88abcbd72fbc4b809dfe9e5bc97ad759