使用recordRTC对video视频进行录制(Vue写法)

问题归类:

  • 问题1,调用recordRTC的startRecording方法报错,解决办法:源码的引入html2canvas插件错误
  • 问题2,html2canvas对video不兼容或者跨域,所以决定不用
  • 问题3,setTimeout和requestAnimationFrame传的方法不要looper()会导致堆栈超出

源码如下

<template>
  <div>
    <h1>HTML Element Recording using RecordRTC</h1>

    <br />

    <button id="btn-start-recording" @click="start" :disabled="adisabled">
      Start Recording
    </button>
    <button id="btn-stop-recording" @click="stop" :disabled="bdisabled">
      Stop Recording
    </button>

    <hr />
    <div style="display: none">
      <video controls autoplay playsinline id="preview-video"></video>
    </div>
    <
  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
使用Vue-Video-Player播放Vue视频,首先确保已安装插件。按照以下步骤操作: 1. 安装插件: ```shell npm install vue-video-player --save ``` 2. 引入插件: - **全局引入**: ```javascript // 在main.js或者其他全局脚本中 import VueVideoPlayer from 'vue-video-player' Vue.use(VueVideoPlayer) ``` - **组件内引入**: ```javascript // 在需要使用video-player的组件文件中 import { videoPlayer } from 'vue-video-player' ``` 3. 在模板中使用VideoPlayer组件: ```html <template> <div> <video-player :options="playerOptions" ref="videoPlayer"></video-player> </div> </template> ``` 4. 配置播放器选项 (playerOptions): ```javascript data() { return { playerOptions: { // 这里可以设置视频源、播放控制、事件监听等选项 src: 'your-video-url', controls: true, muted: false, // 如果需要,默认静音 autoplay: false, // 是否自动播放,默认不自动 // 更多选项请参考官方文档:https://github.com/Collab-project/vue-video-player#options } } }, ``` 5. 监听播放事件和控制: ```javascript methods: { onPlay() { console.log('Video started playing'); }, onPause() { console.log('Video paused'); }, ... // 其他事件如ended、error等 }, ``` 6. 在组件内使用这些方法: ```javascript mounted() { this.$refs.videoPlayer.on('play', this.onPlay); this.$refs.videoPlayer.on('pause', this.onPause); }, beforeDestroy() { this.$refs.videoPlayer.off('play', this.onPlay); this.$refs.videoPlayer.off('pause', this.onPause); } ```

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值