vue项目中使用cyberplayer插件方法记录

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

 


前言

 vue 项目中使用百度播放组件的方法记录

 

一、项目描述

 前端项目需要接入实时监控视频,所以找到两款播放插件liveplayer 和 cyberplayer 

二、为什么选择百度播放组件 cyberplayer

liverplayer 最先被使用 但最后连接测试监控时前端发生跨域报错(目前还没找到方法解决) ,所以选择使用百度的播放组件

二、使用步骤

1.下载百度播放组件

https://cloud.baidu.com/doc/Developer/index.html#.E6.92.AD.E6.94.BE.E5.99.A8.20Web.20SDK  

点击上方链接,本人选择的是播放器 Web SDK(网页最下方)

先打开开发者工具 切换到控制台,(直接点击下载无反应的)点击下载会出现报错,然后点击报错信息中的网址就能下载成功。

2.解压下载的文件并引入vue项目中

  1. 将解压的文件夹中player文件夹放入项目根目录下public文件里

文件存放

 

  2.打开index.html 文件 将player文件夹中cyberplayer.js文件引入

<script src="<%= BASE_URL %>player/cyberplayer.js"></script>

 

 3.创建一个js文件来封装播放组件使用方法

/*
  idName  获取放入组件的标签元素id名称
  video_url   视频地址
  pic  预览图地址
*/


function playVideo (idName,video_url,pic){
    const player = cyberplayer(idName).setup({
        width: 245, // 宽度,也可以支持百分比(不过父元素宽度要有)
        height: 200, // 高度,也可以支持百分比
        title: "监控视频", // 标题
        file: video_url, // 播放地址
        image: pic, // 预览图
        autostart: false, // 是否自动播放
        stretching: "uniform", // 拉伸设置
        repeat: false, // 是否重复播放
        volume: 100, // 音量
        controls: true, // controlbar是否显示
        starttime: 0, // 视频开始播放时间点(单位s),如果不设置,则可以从上次播放时间点续播
        logo: { // logo设置
            linktarget: "_blank",
            margin: 8,
            hide: false,
            position: "top-right", // 位置
            file: "./img/logo.png" // 图片地址
        },
        ak: "xxxxxxx" // 公有云平台注册即可获得accessKey  密钥可自行申请
    });
    return player
}

export default playVideo



//以下为百度播放demo的视频和预览图地址
//http://cyberplayer.bcelive.com/videoworks/mdakbuhu4wqdi08dwix/cyberplayer/mp4/cyberplayer-demo.mp4
// http://cyberplayer.bcelive.com/thumbnail.jpg

4.页面使用封装好的方法

<template>
        //创建一个放入播放组件的容器 
        <div id="playercontainer"></div>
</template>

<script>
//引入封装好的js文件
import playVideo from "@/assets/js/playVideo";

export default {

  mounted() {
    const videoUrl = "http://cmgw-vpc.lechange.com:8888/LCO/6C0735CPAZ98561/0/1/20210528T073915/0c4ac2342dad9fd86b90e9b926cb0dd6.m3u8";
    const picUrl = "http://cyberplayer.bcelive.com/thumbnail.jpg";
//将容器的id名 视频地址 预览图地址 传入方法中
    playVideo("playercontainer", videoUrl, picUrl);
  },
 
};
 

 3.最终效果图

 

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
### 回答1: 在使用 Vue 项目使用 CodeHighlighter 插件,需要进行如下步骤: 1. 安装 CodeHighlighter 插件: 使用 npm 或 yarn 安装 CodeHighlighter 插件,例如: npm install vue-code-highlight 2. 引入 CodeHighlighter: 在 main.js 引入 CodeHighlighter 插件,例如: import VueCodeHighlight from 'vue-code-highlight' 3. 注册 CodeHighlighter: 在 main.js 注册 CodeHighlighter 插件,例如: Vue.use(VueCodeHighlight) 4. 使用 CodeHighlighter 组件: 在需要使用高亮的页面使用 CodeHighlighter 组件,例如: ``` <template> <code-highlight :code="code" :language="language"></code-highlight> </template> <script> export default { data() { return { code: '<div>Hello, World!</div>', language: 'html' } } } </script> ``` 5. 引入样式: 引入 CodeHighlighter 插件的样式文件, 例如: import 'vue-code-highlight/themes/prism-okaidia.css' 这样就可以在Vue项目使用CodeHighlighter插件了。 ### 回答2: 在Vue项目使用CodeHighlighter插件可以按照以下步骤进行: 1. 首先,确保你已经安装了Vue.js和CodeHighlighter插件。可以使用npm或者yarn进行安装。在终端执行下面的命令来安装CodeHighlighter插件: ``` npm install vue-code-highlighter ``` 或者 ``` yarn add vue-code-highlighter ``` 2. 安装完成后,在你的Vue项目的入口文件(通常是main.js)导入和使用CodeHighlighter插件: ```javascript import Vue from 'vue'; import VueCodeHighlighter from 'vue-code-highlighter'; Vue.use(VueCodeHighlighter); ``` 这个步骤是将CodeHighlighter插件注册为Vue的全局组件,使得我们可以在任何Vue组件使用它。 3. 现在你可以在你的Vue组件使用CodeHighlighter插件了。在需要高亮代码的地方,使用`<vue-code-highlighter></vue-code-highlighter>`标签将要高亮的代码包裹起来,并且通过`lang`属性指定代码的语言类型。例如,如果你的代码是JavaScript的,你可以这样写: ```html <vue-code-highlighter lang="javascript"> // your code here </vue-code-highlighter> ``` 使用这种方式,你可以将JavaScript、HTML、CSS以及其他语言的代码在你的Vue组件进行高亮显示。 4. 最后,你可以根据需要修改CodeHighlighter的样式和配置。在你的Vue项目的样式文件进行修改,可以参考CodeHighlighter插件的文档来进行配置,例如支持更多的语言类型、修改颜色样式等。 这样,你就可以在Vue项目使用CodeHighlighter插件来高亮代码了。记得在代码修改后编译运行项目以查看效果。 ### 回答3: 要在Vue项目使用CodeHighlighter插件,可以按照以下步骤进行: 1. 首先,需要在Vue项目安装CodeHighlighter插件。可以通过npm或者yarn来安装,比如在终端运行以下命令:`npm install code-highlighter`。 2. 然后,需要在Vue组件引入CodeHighlighter插件。可以在要使用CodeHighlighter的组件使用import语句引入插件,例如:`import CodeHighlighter from 'code-highlighter'`。 3. 接下来,可以在Vue组件的`mounted`或者`created`生命周期钩子函数初始化CodeHighlighter插件。例如,在`mounted`钩子函数,可以使用如下代码初始化插件:`CodeHighlighter.init()`。 4. 然后,需要在Vue组件使用CodeHighlighter来高亮显示代码。可以在需要高亮显示代码的地方,使用CodeHighlighter的`highlightBlock`方法来实现。例如,如果要高亮显示一个HTML代码块,可以使用如下代码:`CodeHighlighter.highlightBlock(document.getElementById('code-block'))`(其,`'code-block'`为对应HTML代码块的id)。 5. 最后,可以根据自己的需求定制CodeHighlighter插件的样式。可以在Vue组件的样式表,根据自己的需求来修改插件的样式。 总的来说,使用CodeHighlighter插件Vue项目的步骤包括:安装插件、引入插件、初始化插件使用插件高亮显示代码,以及定制样式。根据以上步骤,即可在Vue项目成功使用CodeHighlighter插件

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值