视频播放时间轴

最新推荐文章于 2023-08-15 19:21:16 发布
最新推荐文章于 2023-08-15 19:21:16 发布
阅读量281 收藏
点赞数
文章标签： 音视频 dreamweaver java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31810553/article/details/130856587
版权

import moment from "moment";

export default class timeAxis {

  constructor(options) {

    if (!options.dom) {

      return "";

    }

    for (let option in options) {

      if (options.hasOwnProperty(option)) {

        this[option] = options[option];

      }

    }

    if (this.timecell && this.timecell.length) {

      this.currentTimestamp = this.timecell[0].begin;

    }

    if (options.cellStyle && options.cellStyle.background) {

      this.cellStyle = options.cellStyle;

    } else {

      this.cellStyle = {

        background: "rgba(24,208,217,0.5)",

        borderBottomColor: "yellow", // 添加这一行

        borderBottomWidth: 10, // 添加这一行

      };

    }

    this.isClick = false;

    this.button = 0; // 0:左键， 2:右键

    this.isPressDown = false; // 是否按下

    this.isDragPointer = false;

    this.currentChecked = "";

    this.zoomHours = 4;

    this.graduationMinStep = 10;

    this.minutesPerStep = [

      1, 2, 5, 10, 15, 20, 30, 60, 120, 180, 240, 360, 720, 1440,

    ];

    this.pointerOptions = {

      beginX: 0,

      beginY: 0,

      endX: 0,

      endY: 30,

      color: "rgb(255, 255, 255)",

      width: 2,

    };

    this.initCanvas();

    this.initCanvasCtx();

  }

  initCanvas() {

    this.canvas = document.createElement("canvas");

    this.canvas.width = this.dom.clientWidth;

    this.canvas.height = this.dom.clientHeight;

    this.canvas.style.backgroundColor = this.bg;

    this.canvasWidth = this.canvas.width;

    this.canvasHeight = this.canvas.height;

    this.dom.appendChild(this.canvas);

    this.canvasCtx = this.canvas.getContext("2d");

    this.canvasGraduationsLinesCtx = this.canvas.getContext("2d");

    this.canvasPlayPointerCtx = this.canvas.getContext("2d");

    this.initEvents();

  }

  resize() {

    this.canvas.width = this.dom.clientWidth;

    this.canvas.height = this.height;

    this.canvas.style.backgroundColor = this.bg;

    this.canvasWidth = this.canvas.width;

    this.canvasHeight = this.canvas.height;

    this.clearCanvas();

    this.initCanvasCtx();

  }

  initCanvasCtx() {

    this.pxPerMs = this.canvasWidth / (this.zoomHours * 60 * 60 * 1000);

    this.initBorders();

    this.initTimeCells(this.timecell || []);

    // 渲染时间轴

    this.initGraduationsLines(this.date);

    if (this.isClick) {

      // 渲染播放指针

      this.initPlayPointerCtx();

    }

  }

  // 初始化边框

  initBorders() {

    let borderColor = "rgb(151, 158, 167)";

    //顶线

    this.drawLine({

      beginX: 0,

      beginY: 0,

      endX: this.canvasWidth,

      endY: 0,

      color: borderColor,

      width: 1,

    });

    //底线

    this.drawLine({

      beginX: 0,

      beginY: this.canvasHeight,

      endX: this.canvasWidth,

      endY: this.canvasHeight,

      color: borderColor,

      width: 1,

    });

  }

  // 画线

  drawLine({ beginX, beginY, endX, endY, color, width }) {

    this.canvasCtx.beginPath();

    this.canvasCtx.moveTo(beginX, beginY);

    this.canvasCtx.lineTo(endX, endY);

    this.canvasCtx.strokeStyle = color;

    this.canvasCtx.lineWidth = width;

    this.canvasCtx.stroke();

  }

  // 有效时间区域

  initTimeCells(datas) {

    // 分段填充时间段

    datas.forEach((cell, index) => {

      this.drawCell(cell, index);

    });

    this.canvasCtx.font = "normal normal 12px Arial,sans-serif";

    this.canvasCtx.fillStyle = "#fff";

  }

  // 填充时间段

  drawCell(data, index) {

    let fillColor = this.cellStyle.background;

    let borderBottomColor = this.cellStyle.borderBottomColor; // 获取边框颜色

    let borderBottomWidth = this.cellStyle.borderBottomWidth || 2; // 获取边框宽度

    if (data.style && data.style.background) {

      fillColor = data.style.background;

    }

    let cellBeginX = this.pxPerMs * (data.begin - this.date);

    let cellWidth = (data.end - data.begin) * this.pxPerMs;

    this.canvasCtx.fillStyle = fillColor;

    this.canvasCtx.font = "normal normal 12px Arial,sans-serif";

    this.canvasCtx.fillRect(cellBeginX, 0, cellWidth, this.canvas.height);

    this.canvasCtx.fillStyle = "#fff";

     // 先绘制填充区域

  this.canvasCtx.fillStyle = fillColor;

  this.canvasCtx.fillRect(

    cellBeginX,

    0,

    cellWidth,

    this.canvas.height - borderBottomWidth

  );

     // 绘制底部边框

  if (borderBottomColor) {

    this.canvasCtx.fillStyle = borderBottomColor;

    this.canvasCtx.fillRect(

      cellBeginX,

      this.canvas.height - borderBottomWidth,

      cellWidth,

      borderBottomWidth

    );

  }

}

  // 初始化刻度线

  initGraduationsLines(date) {

    let widthTotal = this.canvasWidth;

    // 一分钟转换为px

    let pxPerMinute = widthTotal / (this.zoomHours * 60);

    // 一毫秒转换为px

    let pxPerMs = widthTotal / (this.zoomHours * 60 * 60 * 1000);

    // 一格转换为分钟

    let StepPerMinute = this.graduationMinStep / pxPerMinute;

    let minutePerStep = this.minutesPerStep.find(

      (item) => item > StepPerMinute

    );

    // 每格的宽度

    let stepPerPx = minutePerStep * pxPerMinute;

    //总格数(每格{minutePerStep}分钟)

    let stepTotalNum = widthTotal / stepPerPx;

    let msOffset = this.ms_to_next_step(date, minutePerStep * 60 * 1000); //开始的偏移时间 ms

    let pxOffset = msOffset * pxPerMs; //开始的偏移距离 px

    for (let i = 0; i <= stepTotalNum; i++) {

      let graduationTime = date + msOffset + i * (stepPerPx / pxPerMs); //时间=左侧开始时间+偏移时间+格数*ms/格

      let leftPx = pxOffset + i * stepPerPx;

      let lineH = 10;

      let width = 1;

      if (this.formatDate("hh:mm:ss", graduationTime) === "00:00:00") {

        // 0点

        lineH = 20;

        width = 3;

        let bigDateTitle = this.formatDate(" ", graduationTime);

        this.canvasGraduationsLinesCtx.textAlign = "center";

        this.canvasGraduationsLinesCtx.fillStyle = "#ffffff";

        this.canvasGraduationsLinesCtx.font =

          "normal normal 12px Arial,sans-serif";

        this.canvasGraduationsLinesCtx.fillText(bigDateTitle, leftPx, 30);

      } else if ((graduationTime / (60 * 6 * 1000)) % minutePerStep === 0) {

        // 整小时

        lineH = 15;

        width = 2;

        let middleDateTitle = this.formatDate("hh:mm", graduationTime);

        this.canvasGraduationsLinesCtx.fillStyle = "#ffffff";

        this.canvasGraduationsLinesCtx.textAlign = "center";

        this.canvasGraduationsLinesCtx.font =

          "normal normal 12px Arial,sans-serif";

        this.canvasGraduationsLinesCtx.fillText(middleDateTitle, leftPx, 25);

      } else {

        lineH = 10;

        width = 1;

      }

      let options = {

        beginX: leftPx,

        beginY: 0,

        endX: leftPx,

        endY: lineH,

        color: "rgba(151,158,167,1)",

        width: 1,

      };

      // 刻度线

      this.drawLine(options);

    }

  }

  // 初始化指针

  initPlayPointerCtx() {

    if (this.currentTimestamp) {

      this.pointerOptions.beginX =

        this.pxPerMs * (this.currentTimestamp - this.date);

      this.pointerOptions.endX =

        this.pxPerMs * (this.currentTimestamp - this.date);

    }

    this.canvasPlayPointerCtx.beginPath();

    // 开始位置 (0,0)

    this.canvasPlayPointerCtx.moveTo(

      this.pointerOptions.beginX,

      this.pointerOptions.beginY

    );

    // 结束位置 (0,30)

    this.canvasPlayPointerCtx.lineTo(this.pointerOptions.endX, 50);

    this.canvasPlayPointerCtx.strokeStyle = this.pointerOptions.color;

    this.canvasPlayPointerCtx.lineWidth = this.pointerOptions.width;

    this.canvasPlayPointerCtx.stroke();

    // 正方形

    this.canvasPlayPointerCtx.beginPath();

    const squareSize = 8; // 正方形的边长

    this.canvasPlayPointerCtx.rect(

      this.pointerOptions.beginX - squareSize / 2,

      0,

      squareSize,

      squareSize

    );

    let grd = this.canvasPlayPointerCtx.createLinearGradient(0, 0, 200, 0); // 使用渐变颜色填充,从(0,0)到(200,0) （左到右）

    grd.addColorStop(0, this.pointerOptions.color); // 起始颜色

    grd.addColorStop(1, this.pointerOptions.color); // 终点颜色

    this.canvasPlayPointerCtx.fillStyle = grd; // 以上面定义的渐变填充

    this.canvasPlayPointerCtx.fill(); // 填充颜色

    this.canvasPlayPointerCtx.closePath();

  }

  ms_to_next_step(timestamp, step) {

    let remainder = timestamp % step;

    return remainder ? step - remainder : 0;

  }

  // 注册事件

  initEvents() {

    if (this.canvas) {

      this.canvas.addEventListener("contextmenu", (e) => {

        e.preventDefault();

      });

      this.canvas.addEventListener(

        "mousemove",

        this.canvasMousemoveFunc.bind(this)

      );

      // 滚轮事件

      this.canvas.addEventListener(

        "mousewheel",

        this.mousewheelFunc.bind(this)

      );

      this.canvas.addEventListener("mousedown", this.mousedownFunc.bind(this));

      this.canvas.addEventListener("mouseup", this.mouseupFunc.bind(this));

      this.canvas.addEventListener("mouseout", this.mouseoutFunc.bind(this));

      this.canvas.addEventListener("click", this.clickFunc.bind(this));

    }

  }

  // 判断能否拖动轴

  canDragAxis() {}

  canDragPointer(ev) {

    let x = ev.offsetX;

    let y = ev.offsetY;

    return this.canvasPlayPointerCtx.isPointInPath(x, y);

  }

  setPointer(ev) {

    if (this.canDragPointer(ev)) {

      this.dom.style.cursor = "pointer";

      this.isDragPointer = true;

      this.isMoveTriangle = true;

    } else if (!this.isPressDown || this.button) {

      // 指针没在拖动过程中

      if (!(this.isPressDown && this.isMoveTriangle)) {

        this.isDragPointer = false;

        this.isMoveTriangle = false;

        this.dom.style.cursor = "";

      }

    }

  }

  // 鼠标点击(按下)

  mousedownFunc(e) {

    console.log("---------", e);

    if (e.button === 0) {

      // 左键按下

      this.isPressDown = true;

      this.button = e.button;

      if (this.canDragPointer(e)) {

        this.currentChecked = "pointer";

      } else {

        this.currentChecked = "axis";

      }

      // 鼠标移动事件

      document.onmousemove = (e) => {

        this.mousemoveFunc(e);

      };

      document.onmouseup = (e) => {

        this.mouseupFunc(e);

        document.onmousemove = null;

        document.onmouseup = null;

      };

      this.isDown = true;

      this.g_mousedownCursor = this.getCursorPositionX(e); // 记住mousedown的位置

    } else if (e.button === 2) {

      // 右键按下

    }

  }

  // canvas 鼠标移动

  canvasMousemoveFunc(e) {

    let posX = this.getCursorPositionX(e);

    this.setPointer(e);

    this.clearCanvas();

    // 只鼠标移动

    let timestamp = this.date + posX / this.pxPerMs;

    if (!this.isMoveTriangle) {

      this.drawLine({

        beginX: posX,

        beginY: 0,

        endX: posX,

        endY: this.canvasHeight,

        color: "rgb(0, 255, 0,0)",

        width: 1,

      });

    }

    this.initCanvasCtx();

    this.canvasCtx.fillStyle = "rgb(0, 255, 0,0)";

    this.canvasCtx.textAlign = "center";

    this.canvasCtx.fillText(this.formatDate("hh:mm", timestamp), posX, 18);

  }

  isValidTime(newDate) {

    const today = new Date();

    const minDate = new Date(

      today.getFullYear(),

      today.getMonth(),

      today.getDate(),

      0,

      0,

      0

    );

    const maxDate = new Date(

      today.getFullYear(),

      today.getMonth(),

      today.getDate(),

      20,

      0,

      0

    );

    return newDate >= minDate && newDate <= maxDate;

  }

  convertTimestampToDate(timestamp) {

    const date = new Date(timestamp);

    return date.toLocaleString();

  }

    // 鼠标指针Y位置

    getCursorPositionY(e) {

      let posy = 0;

      if (!e) {

        e = window.event;

      }

      if (e.pageY) {

        posy = e.pageY;

      } else if (e.clientY) {

        posy =

          e.clientY +

          document.body.scrollTop +

          document.documentElement.scrollTop;

      }

      posy -= this.canvas.getBoundingClientRect().top;

      return posy;

    }

  // 鼠标移动

  mousemoveFunc(e) {

    let posX = this.getCursorPositionX(e);

    let posY = this.getCursorPositionY(e);

    this.setPointer(e);

   

    if (posX < 0 || posX > this.canvasWidth || posY < 0 || posY > this.canvasHeight) {

      // 当鼠标超出画布时，不执行拖动逻辑

      this.clearCanvas();

      this.initCanvasCtx();

      return;

    }

    this.clearCanvas();

    this.isMove = true;

    if (this.currentChecked === "axis") {

      // 拖动时间轴

      let diffX = posX - this.g_mousedownCursor;

      let maxDiffX = 5; // 限制每次更新的最大距离，可以自行调整

      if (Math.abs(diffX) > maxDiffX) {

        diffX = maxDiffX * Math.sign(diffX);

      }

      let newDate = this.date - Math.round(diffX / this.pxPerMs);

      let newDateString = this.convertTimestampToDate(newDate);

      if (this.isValidTime(new Date(newDateString))) {

        this.date = newDate;

        console.log("拖动", newDateString);

      } else {

        // 当新日期超出范围时，更新g_mousedownCursor的值，使其不再移动

        this.g_mousedownCursor = posX;

      }

      this.initCanvasCtx();

    } else if (this.currentChecked === "pointer") {

      let diffX = posX - this.g_mousedownCursor;

      let maxDiffX = 5;

      if (Math.abs(diffX) > maxDiffX) {

        diffX = maxDiffX * Math.sign(diffX);

      }

      this.currentTimestamp = this.date + diffX / this.pxPerMs;

      this.g_mousedownCursor = posX;

      this.initCanvasCtx();

      this.canvasCtx.fillStyle = "rgb(0, 255, 0)";

      this.canvasCtx.textAlign = "center";

      this.canvasCtx.fillText(

        this.formatDate("yyyy-MM-dd hh:mm:ss", this.currentTimestamp),

        posX,

        18

      );

      }

  }

  // 鼠标抬起

  mouseupFunc(e) {

    if (this.isPressDown && this.button === 0) {

      // 左键

      this.isPressDown = false;

      if (this.isMove) {

        // 拖动

        this.isMove = false;

        if (this.currentChecked === "axis") {

          // 拖动轴

        } else if (this.currentChecked === "pointer") {

          // 拖动指针

          this.returnTime = this.currentTimestamp;

          this.returnCheckTime("darg", this.returnTime);

        }

        this.currentChecked = "";

      } else {

        // 点击

        if (!this.isClick) {

          this.isClick = true;

        }

        // let posX = this.getCursorPositionX(e);

        let posX = this.getCursorPositionX(e);

        this.currentTimestamp = this.returnTime =

          this.date +

          (posX * (this.zoomHours * 3600 * 1000)) / this.canvasWidth;

        let timestamp = this.date + posX / this.pxPerMs;

        const time = this.formatDate("hh:mm", timestamp);

        this.returnCheckTime("click", time);

        this.clearCanvas();

        this.initCanvasCtx();

      }

    }

  }

  // 鼠标点击

  clickFunc(e) {

    let posX = this.getCursorPositionX(e);

    let timestamp = this.date + posX / this.pxPerMs;

    const time = this.formatDate("hh:mm", timestamp);

    console.log("查看点击内容", time);

  }

  // 滚轮事件

  mousewheelFunc(event) {

      if (event && event.preventDefault) {

      event.preventDefault()

    } else {

      window.event.returnValue = false;

      return false;

    }

    let e = window.event || event;

    let delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

    let posX = this.getCursorPositionX(e);

    let middle_time = this.date + posX * (this.zoomHours * 3600 * 1000) / (this.canvasWidth); //ms 记住当前中间的时间

    if (delta < 0) {

      this.zoomHours = this.zoomHours - delta;

      if (this.zoomHours >= 24) {

        this.zoomHours = 24;//放大最大24小时

      }

    } else if (delta > 0) {// 放大

      this.zoomHours = this.zoomHours - delta;

      if (this.zoomHours <= 1) {

        this.zoomHours = 1;//缩小最小1小时

      }

    }

    this.clearCanvas();

    this.date = middle_time - posX * (this.zoomHours * 3600 * 1000) / (this.canvasWidth);

    this.initCanvasCtx()

    console.log('1111111111111111',this.zoomHours)

  }

  mouseoutFunc(e) {

    this.clearCanvas();

    this.initCanvasCtx();

  }

  // 鼠标指针X位置

  getCursorPositionX(e) {

    let posx = 0;

    if (!e) {

      e = window.event;

    }

    if (e.pageX || e.pageY) {

      posx = e.pageX;

    } else if (e.clientX || e.clientY) {

      posx =

        e.clientX +

        document.body.scrollLeft +

        document.documentElement.scrollLeft;

    }

    posx -= this.canvas.getBoundingClientRect().left;

    return posx;

  }

  // 清除canvas 每次重新绘制需要先清除

  clearCanvas() {

    this.canvasCtx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);

  }

  /**

   * 返回点击或者拖动的时间点

   * @param handle 触发方式{click,darg}

   * @param currentTime 选中时间戳{1637164800000}

   */

  returnCheckTime(handle, currentTime) {

    console.log("查看选择的时间", currentTime);

    // 将 currentTime 转换为 Date 对象

    let currentDate = new Date(currentTime);

    // 转换回一个适当的时间戳（毫秒）

    let adjustedTimestamp = currentDate.getTime();

    // 向下取整

    let formatCurrentTime = Math.floor(adjustedTimestamp);

    // 判断时间是否有效

    let isIndex = this.timecell.findIndex((item) => {

      return formatCurrentTime >= item.begin && formatCurrentTime <= item.end;

    });

    // if (isIndex >= 0) {

    // 有效区域

    if (handle === "darg") {

      this.callback({

        mode: "darg", // 触发方式

        timestamp: formatCurrentTime, // 时间戳

        valid: true,

      });

    } else if (handle === "click") {

      this.callback({

        mode: "click",

        timestamp: currentTime,

        valid: true

      });

    }

  }

  formatDate(fmt, date) {

    let myDate = date ? new Date(date) : new Date();

    fmt = fmt || "yyyy-MM-dd";

    const o = {

      "M+": myDate.getMonth() + 1, // 月份

      "d+": myDate.getDate(), // 日

      "h+": myDate.getHours(), // 小时

      "m+": myDate.getMinutes(), // 分

      "s+": myDate.getSeconds(), // 秒

      "q+": Math.floor((myDate.getMonth() + 3) / 3), // 季度

      S: myDate.getMilliseconds(), // 毫秒

    };

    if (/(y+)/.test(fmt)) {

      fmt = fmt.replace(

        RegExp.$1,

        (myDate.getFullYear() + "").substr(4 - RegExp.$1.length)

      );

    }

    for (const k in o) {

      if (new RegExp("(" + k + ")").test(fmt)) {

        fmt = fmt.replace(

          RegExp.$1,

          RegExp.$1.length == 1

            ? o[k]

            : ("00" + o[k]).substr(("" + o[k]).length)

        );

      }

    }

    return fmt;

  }

  updateDatas(options) {

    this.zoomHours = options.zoomHours;

    this.date = options.date;

    this.timecell = options.times;

    if (options.times.length) {

      // this.currentTimestamp = options.times[0].begin

    }

    this.clearCanvas();

    this.initCanvasCtx();

  }

  // 更新时间 m

  updateTime(time) {

    if (this.returnTime) {

      this.returnTime = time;

      this.currentTimestamp = time;

    }

    this.clearCanvas();

    this.initCanvasCtx();

  }

  setCurrentTimestamp(timestamp) {

    this.currentTimestamp = timestamp;

    this.initCanvasCtx();

    this.canvasCtx.fillStyle = "rgb(0, 255, 0)";

    this.canvasCtx.textAlign = "center";

    let posX = (timestamp - this.date) * this.pxPerMs;

    this.canvasCtx.fillText(

      this.formatDate("yyyy-MM-dd hh:mm:ss", this.currentTimestamp),

      posX,

      18

    );

  }

  setPointer(timestamp) {

    this.setCurrentTimestamp(timestamp);

    this.callback({ timestamp: timestamp });

  }  

}

qq_31810553
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js仿萤石云的视频回放插件拖动效果-时间标尺timeRuler
04-05
js仿萤石云的视频回放插件拖动效果-时间标尺timeRuler csdn地址：https://blog.csdn.net/chenluliang/article/details/123974475
react-timeline-bar：用于视频的React.js时间线控件
02-13
React时间线 用于视频的时间轴控件 安装 npm install --save react-timeline-bar 用法 import React from ' react ' import Timeline from ' react-timeline-bar ' import ' react-timeline-bar/dist/index.css ' const Example = () => { render () { return < Timeline xss=removed xss=removed> console . log ( seconds ) } /> } } 道具 totalDuration例如视频的总长度，以秒为单位 currentTime当前视频播放时间的秒数 onSetNewTime回调，返回用户单击的totalDuration空间中的秒
C# 视频时间轴控制 DirectShow VLC
01-09
C# 视频时间轴控制 DirectShow VLC
视频播放器时间轴控件
04-30
从CStatic类派生的一个CTimebar类，具体功能查看CTimebar.h文件
使用canvas写的时间轴插件，可以实现拖动、点击返回时间点、增加录像块、放大缩小等功能
04-25
分享一个使用canvas写的时间轴插件 这是一个使用canvas写的时间轴插件，可以实现拖动、点击返回时间点、增加录像块、放大缩小等功能 在我工作项目中用在了视频回放时间轴部分 项目开发刚好用到，找了很久终于合适
Web前端从初级到高手之路
12-28
本套课程分为UI设计基础课程、Web前端通用代码与UI交互实现、移动端Web前端与UI实现三个大章节，课程讲述UI设计、Flash、交互设计、HTML5、CSS3、JavaScript等web前端技术。凡是购买本套课程的学员，可以加QQ群： 152364681，专业讲师进行在线答疑与指导，学不懂有疑问，随时问，永久服务，并赠送海量web前端练习素材，名师一路陪伴，让学员真正成为一名优秀的web前端工程师。
C＃的视频时间轴控制DirectShow的VLC喜欢Adobe后遗症（转）
csdn_aspnet的专栏
08-02 4118
http://www.codeproject.com/Articles/32430/C-Video-TimeLine-Control-for-DirectShow-VLC-Like-A Download TimeLine_src - 1.44 MB Introduction - C# Video TimeLine for VLC or DirectShow This ar
基于时间轴的视频文件检索
星火的专栏
05-07 3596
在视频监控的检索结果显示方式中，大部分方式采用了文件列表的方式。但是这种方式对于用户来说非常不直观，因为文件名称是DVR的内部文件名，该信息对于用户来说没有任何意义，如下图所示： 图 1 文件列表的方式显示检索结果 在用户回放的时候，需要一个一个的选择文件，然后进行回放，这种方式对于用户来说太专业，根本无法顺利快速找到要回放的位置。      本文介绍一种基于时间轴的视频文件检索方式，
【C#获取音频文件的播放时间】
英雄主义
09-18 3986
[DllImport("Kernel32", CharSet = CharSet.Auto)]         static extern Int32 GetShortPathName(String path, StringBuilder shortPath, Int32 shortPathLength);         [DllImport("winmm.dll")]      
拖拽时间轴
08-13
分享一个拖拽的时间轴代码，多多指点。　
videotimeline.js:用于控制多个 HTML5 视频对象的基于画布的时间线
07-09
视频时间线.js 用于控制多个 HTML5 视频对象的基于画布的时间线。 它是由 Marcin Ignac 创建的动画时间线上的一个分支，经过修改以用于 HTML5 视频。 全局播放/暂停/停止控件和所有连接视频沿时间轴滑动。 旨在跟踪多摄像机设置（生产、安全、体育等）的回放。 用法 已在 DOM 中的视频 只需添加尽可能多 var timeline = new Timeline(); timeline.addVideoFromDOM("camera1", "vid1"); timeline.addVideoFromDOM("camera2", "vid2"); timeline.addVideoLink("camera3", "url-to-camera.ogv", true); 时间线将自动出现在页面底部。 单击轨道名称切换到该视频，然后拖放滑块跳过 查看一个简单的演示 不在
视频播放时间轴播放器.zip
08-19
视频播放器和时间轴联动.可以点击时间点到当前视频.时间轴工程和播放器的实现代码和图片资源都有.可以仔细研究下,很好的哦!.net4.5
时间线控件，视频播放时间控制
10-24
自定义控件开发，时间范围选择控制，用于视频播放的时间段选择，开发者可进行二次开发，开发语言C#，框架.net framework
音视频播放器时间轴控件
01-20
音视频播放器时间轴控件。
html，js实现时间轴，可播放视频，点击放大图片
08-12
用html，js实现时间轴，页面可以随鼠标滚动，可播放视频，点击放大图片
基于vue封装好的时间轴组件
06-13
适用于地图实时更新数据、底部的时间轴、基于vue封装
C 代码 解析歌词，然后与时间轴一直显示
laocooon的博客
08-15 146
03:37.84][02:56.25][01:12.94][03:38.44][02:57.03][01:14.54]把握生命里每一次感动。[02:35.69][00:52.74][03:18.02][02:36.61][00:53.96]把握生命里的每一分钟。[01:53.46][00:10.07][01:55.54][00:11.60]周：在我心中曾经有一个梦。[03:22.81][02:41.27][00:58.68]全力以赴我们心中的梦。[04:29.66]让真心的话和开心的泪。
使用Echarts绘制自动播放的时间轴排名图表 时间轴动态排名
Wingkin的博客
06-19 2150
本实验所用数据来自于国家数据网站，网址为http://data.stats.gov.cn/easyquery.htm?cn=E0103。 所用数据为2010-2019年各省年度GDP，如下图所示： 动态图表制作过程 (1)本动态图表使用Echarts绘制。首先新建一个HTML文件。 (2)引入 echarts.js。 (3)设置动态图表的宽度和高度，并初始化echarts实例。 (4)加入数据。 (5)设置动态图表的播放速度和颜色。 (6)完成后使用浏览器打开HTML文件即可看到..
qt 视频时间轴示例
最新发布
08-23
Qt 是一个跨平台的应用程序开发框架，它包含丰富的功能模块，其中也包括了用于处理视频的模块。视频时间轴是一种常见的功能，它在处理视频时非常有用。 在 Qt 中，可以使用 QML（Qt中的标记语言）和 C++ 来创建具有视频时间轴的应用程序。下面是一个简单的示例来说明如何使用 Qt 实现视频时间轴功能： 1. 首先，导入 Qt 的相关模块和库，如 QtQuick、QtMultimedia 和 QtQuick.Controls。 2. 创建一个包含视频视图和时间轴的用户界面。可以使用 QML 来定义界面的外观和布局，并将其与后端的 C++ 代码连接起来。 3. 使用 QMediaPlayer 类来加载和播放视频文件。可以设置视频文件的 URL、音量和其他属性。 4. 使用 QML 创建一个时间轴组件，例如使用 Slider 控件。将 Slider 绑定到视频的播放位置，使它能够通过拖动来调整视频的播放进度。 5. 配置时间轴的各种属性，例如设置最小值和最大值、步长和初始值。还可以添加其他样式和行为，如滑块样式、间隔线和提示信息。 6. 将时间轴的值连接到 QMediaPlayer 的 setPosition() 方法，以便在滑块被拖动时调整视频的播放位置。 7. 将播放按钮和暂停按钮与 QMediaPlayer 的 play() 和 pause() 方法连接起来，以便控制视频的播放和暂停。 8. 可以根据需要添加其他功能，如快进、快退、重新播放和全屏等。 通过使用这些步骤，可以在使用 Qt 开发的应用程序中实现视频时间轴功能。这个示例只是一个简单的起点，开发者可以根据实际的需求和设计来扩展和定制。Qt 的强大功能可以帮助开发者轻松实现各种视频处理需求。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值