video.js视频播放器

接到个需求，需要一个视频播放页面，并且进度条需要在某个时间点打上标记。在网上找了一下，发现一个叫videojs-markers的包可以完成此项功能
实现效果图

安装

首先安装videojs:

npm install video.js

也可以到github下载

然后到下载视频标记包videojs-markers
marker download

引入

import 'video.js/dist/video-js.css'
import './assets/videoMaker/videojs-markers.js'
import './assets/videoMaker/videojs.markers.css'
import Video from 'video.js'
Vue.prototype.$video = Video

使用

<template><div class="index-container"><video id="videoid" controls class="video-js vjs-default-skin vjs-big-play-centered"><source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4"></video></div>
</template><script>
export default {data () {return {video:""}
},
mounted(){//创建一个视频对象this.video = this.$video('videoid',{width:800,height:450});//创建标记对象
this.video.markers({markerTip:{text: function(marker) {return  marker.text;}},markers: [{time: 9.5, text: "事故发生之前300米",class: "white-marker-class"},{time: 16,  text: "事故发生点，2020年7月17日"},{time: 23.6,text: "事故发生后400米",class: "white-marker-class"},]
});},//页面离开时销毁视频对象destroyed() {this.video.dispose()}
}
</script>

具体videojs配置中文文档
具体videojs-markers配置文档

video.js视频播放器进度条标记的功能实现相关推荐

【VideoJs】初识videojs video.js 视频播放器的基本使用 videojs基础用法 videojs视频播放器 vue3中使用videojs
videojs介绍免费,开源插件多可自定义 [推] 虽然,但是Videojs算好了,但我觉得有点杂,特别是文档与插件,且自定义插件有点困难,也可能是我比较菜吧相比之下,我还是强烈推荐 [Xgp ...
Vue中使用Video.js视频播放器
Video.js是一个有着HTML5背景的网络视频播放器.它同时支持HTM5和Flash视频,简单来说就是HTMl5 和 Flash 视频播放器安装: npm install video.js ma ...
Vue中引入Video.js视频播放器
安装 $ npm install video.js main.js中引入 import Video from 'video.js' import 'video.js/dist/video-js.css ...
摄屏播放插件html5,Js视频播放器插件Video.js使用方法详解
Video.js快速入门我们可以下载 Video.js 的源码放到自己的服务器上,或者使用免费的 CDN 托管版本. 在页面中引用video-js.cs样式文件和video.js 使用免费的CDN托 ...
Unity实现类似于苹果视频播放器视频播放进度条及声音进度条拖拽功能
Unity实现类似于苹果视频播放器视频播放进度条及声音进度条拖拽功能前言我在之前的博客里介绍过关于VideoPlayer的简单使用流程,之前一直想研究下videoPlayer中的使用进度条控制视频 ...
【Vue】播放flv格式视频（flv.js视频播放器）
图片来源:HTTP-FLV直播初探链接 github地址:GitHub - bilibili/flv.js: HTML5 FLV Player 播放flv格式视频 npm install flv.j ...
elementui进度条如何设置_vue.js+ElementUI实现进度条提示密码强度效果
要求一:判断输入的字符串是否包含数字.小写字母.大写字母以及特殊字符四种内容的8-20位字符通过搜索了解到可以使用?=这个正则语法判断字符串中是否含有多种内容.(?=)这个语法结构在正则里表示&qu ...
JS canvas绘制进度条
JS canvas绘制进度条在前端开发中,我比较喜欢Cavans画布,通过Cavans可以绘制自己想要的东西,在早之前,我通过Canvas播放视频,绘制图片,绘制banner图等,复杂点可以用来做数 ...
jsp注册里密码强弱怎么弄_vue.js+ElementUI实现进度条提示密码强度效果
要求一:判断输入的字符串是否包含数字.小写字母.大写字母以及特殊字符四种内容的8-20位字符通过搜索了解到可以使用?=这个正则语法判断字符串中是否含有多种内容.(?=)这个语法结构在正则里表示&qu ...

video.js视频播放器进度条标记的功能实现

video.js视频播放器的使用

video.js视频播放器

安装

引入

使用

video.js视频播放器进度条标记的功能实现相关推荐

最新文章

热门文章

video.js视频播放器进度条标记的功能实现

video.js视频播放器 的使用

video.js视频播放器

安装

引入

使用

video.js视频播放器进度条标记的功能实现相关推荐

最新文章

热门文章

video.js视频播放器的使用