js视频音频预加载/视频获取截图（返回canvas截图）

最新推荐文章于 2024-07-17 15:51:05 发布

Capricorncd

最新推荐文章于 2024-07-17 15:51:05 发布

阅读量2.1k

点赞数

文章标签： js 视频 canvas

本文链接：https://blog.csdn.net/Yagizacd/article/details/78181610

版权

本文介绍如何使用JavaScript进行视频和音频的预加载，并利用Canvas进行视频截图。通过提供的`load-media.js`库，可以轻松实现媒体资源的加载和截图功能。

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

#load-media.js

/**
 * Create by Capricorncd 2017
 */

// 同域资源实现视频截图，可上传的图片数据格式
// 非同域资源实现canvas截图预览

// 提示码
const CODES = {
  0: 'success',
  1: 'The url is not valid',
  2: 'onerror'
}

/**
 * constructor
 * @param opts.url 音频|视频URL
 * @param opts.type 'audio|video'
 * @param opts.callback 回调函数
 */
function loadMedia(opts) {
  this.callback = opts.callback || function (res) {
    console.log(res);
  }
  // 初始化
  this.init(opts);
}

// prototype
loadMedia.prototype = {
  /**
   * 初始化media
   * @param url
   */
  init: function (opts) {
    let self = this;

    if (!opts.url || typeof opts.url !== 'string') {
      this.callback({code: 1, msg: CODES[1]});
      return;
    }

    // 创建media