vue项目 使用百度云 cyberplayer.js插件方法

  1. 下载资源先:
    https://cloud.baidu.com/doc/Developer/index.html
    点击上面的链接,然后滚动到底部,然后在这下载此sdk
    在这里插入图片描述
  2. 解压以下文件出来放到public文件夹中的play文件夹
    在这里插入图片描述
    在这里插入图片描述
  3. 在index.html引入对应的资源,如图:
    在这里插入图片描述
  4. 然后我直接封装了组件形式了,到时候你使用props传参数进来就好了,直接贴代码了。
<template>
    <!-- 百度云  -->
    <div class="Bvideo">
        <div :id="objVideoData.id" class="playercontainer"></div>
    </div>
</template>

<script>
export default {
    props:{
        objVideoData:{
            type:Object,
            default:function(){
                return {}
            }
        }
    },
    data(){
        return {
			player:null,	//存的数据
		}
    },
    mounted() {
        this.getVideoFn();
    },
    methods:{
        getVideoFn(){
            this.player = cyberplayer(this.objVideoData.idName).setup({
                width: '100%',          // 宽度,也可以支持百分比(不过父元素宽度要有)
                height: '100%',         // 高度,也可以支持百分比
                title: "",              // 标题
                isLive: true,           // 必须设置,表明是直播视频
                //file:'http://cyberplayer.bcelive.com/videoworks/mda-kbuhu4wqdi08dwix/cyberplayer/mp4/cyberplayer-demo.mp4',
                file: this.objVideoData.url,    // 播放地址
                image: 'http://cyberplayer.bcelive.com/thumbnail.jpg',              // 预览图
                autostart: true,        // 是否自动播放
                stretching: "uniform",  // 拉伸设置
                repeat: false,          // 是否重复播放
                volume: 0,              // 音量
                controls: true,         // controlbar是否显示
                starttime: 0,           // 视频开始播放时间点(单位s),如果不设置,则可以从上次播放时间点续播
                hls: {
                    reconnecttime: 8    // hls直播重连间隔秒数
                },
                ak: "306985be4a9b4***"  // 公有云平台注册即可获得accessKey  密钥可自行申请
            });
        }
    },
    watch:{
        objVideoData(newVal,oldVal){
            if(newVal){
                this.getVideoFn();
            }
            
        }
    },
    destroyed(){
        this.player.pause();	//暂停
        this.player.remove();	//删除
    }
}
</script>

<style lang="less" scoped>
    .Bvideo{
        width: 100%;
        height:100%;
    }
</style>

官方的demo:demo

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
根据提供的引用内容,我们可以使用pdf.js插件来实现Vue2项目的PDF预览功能,并且可以实现上一页和下一页的功能。具体步骤如下: 1.首先,我们需要在Vue2项目中安装pdf.js插件。可以使用npm命令进行安装: ```shell npm install pdfjs-dist ``` 2.在Vue2项目中创建一个PDFViewer.vue组件,并在该组件中引入pdf.js插件: ```javascript import pdfjsLib from 'pdfjs-dist' ``` 3.在该组件中,我们需要定义一个pdf对象来存储PDF文件的相关信息: ```javascript data() { return { pdf: null, currentPage: 1, totalPages: 0 } } ``` 4.接下来,我们需要编写一个方法来加载PDF文件并显示第一页: ```javascript loadPDF() { pdfjsLib.getDocument(this.pdfUrl).promise.then(pdf => { this.pdf = pdf this.totalPages = pdf.numPages this.renderPage(this.currentPage) }) }, renderPage(pageNumber) { this.pdf.getPage(pageNumber).then(page => { const canvas = this.$refs.canvas const context = canvas.getContext('2d') const viewport = page.getViewport(1.5) canvas.height = viewport.height canvas.width = viewport.width page.render({ canvasContext: context, viewport: viewport }) }) } ``` 5.在模板中,我们需要添加一个canvas元素来显示PDF文件的内容,并添加两个按钮来实现上一页和下一页的功能: ```html <template> <div> <canvas ref="canvas"></canvas> <div> <button @click="prevPage">上一页</button> <button @click="nextPage">下一页</button> </div> </div> </template> ``` 6.最后,我们需要编写两个方法来实现上一页和下一页的功能: ```javascript prevPage() { if (this.currentPage > 1) { this.currentPage-- this.renderPage(this.currentPage) } }, nextPage() { if (this.currentPage < this.totalPages) { this.currentPage++ this.renderPage(this.currentPage) } } ``` 至此,我们就可以在Vue2项目使用pdf.js插件来实现PDF预览并实现上一页和下一页的功能了。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值