1.功能要求实现视频的实时播放和回放，并且在实时和回放时要求可以给视频打断点，使用两个第三方库来辅助完成此功能。引入以下文件
2.videojs是更丰富的video库，videomarker是打标记的第三方库
3.获取videojs对象的方法：在HTML中写入一个video标签，给定一个id属性，通过id属性去获取video的dom元素，以下是实现部分，还未接入接口
const _this=this
//加载视频相关内容
function loadVideo() {
console.log(_this)
//视频播放
//实例化视频对象，配置选项
var player = videojs('example_video', {
controls: true,//是否开启视频中的控制按钮
//配置倍速
playbackRates: [0.5, 1, 1.5, 2, 2.5]
});
//监听video时间
//视频的实时时间
//player.currentTime中存放的是当前视频的播放时间,单位是秒
player.on("timeupdate", () => {
//保存视频播放的实时时间
_this.vue1.debriefDetails.videoData.currentTimeVideo=player.currentTime()
})
//暂停视频触发事件
player.on("pause", event => {
//console.log(player.currentTime())
})
//拖动视频进度条触发事件
player.on("seeked", event => {
console.log(player.currentTime())
//console.log(player.currentTime())
})
player.markers({
//设置标记样式
markerStyle: {
'width': '5px',
'height': '5px',
'border-radius': '50%',
'background-color': 'red'
},
//视频上方显示内容-----暂时不显示
markerTip: {
display: false,
text: function (marker) {
return "This is a break: " + marker.text;
}
},
//每个标记的中断覆盖选项-----暂时不显示
breakOverlay: {
display: false, //是否显示叠加层
displayTime: 3, //叠加层的持续时间
style: { //为得加层添加样式
color: "red"
},
text: function (marker) { //回调函数动态显示构建文本
return "This is an break overlay: " + marker.text;
}
},
//只要播放到标记的时间间隔就会触发 index是标记的索引
onMarkerReached: function (marker, index) { },
//单击标记触发
onMarkerClick: function (marker, index) { },
markers: [
{
time: 5.5,
text: "this"
},
{
time: 10.5,
text: "is"
},
{
time: 20.5,
text: "demo"
},
{
time: 30.5,
text: "markers"
},
{
time: 40.5,
text: ":)"
},
],
});
//返回当前打的标记数组
var getMarkers = player.markers.getMarkers();
//从视频中的当前时间转到下一标记，如果没有下一个标记，那么什么都不做
$("#btn-next").click(function () {
player.markers.next();
})
//从视频中的当前时间转到上一标记，如果没有上一标记，那么什么都不做
$("#btn-prev").click(function () {
player.markers.prev();
})
//动态添加新标记
$("#btn-add").click(function () {
player.markers.add([{
time: 55,
text: "I'm added dynamically"
}]);
})
//拖动进度条
}
//关于videojs的文档
Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库，Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。
在页面中引用video-js.cs样式文件和video.js
| 1 2 |
|
设置flash路径，Video.js会在不支持html5的浏览中使用flash播放视频文件
| 1 2 3 | |
html
poster="**"播放初始图。可使用三种视频格式，根据所需要格式选择对应的。
| 1 2 3 4 5 6 7 8 9 |
|
设置自动播放将下面代码加到html中代码后面
| 1 2 3 4 5 6 7 |
|
默认情况下，大的播放按钮是被定为在左上角的，这样就不会覆盖视频内容。如果你想让这个播放按钮居中，你可以给你的 video 标签添加额外的 vjs-big-play-centered 样式，比如：
| 1 2 3 4 5 6 |
|
如果你还对播放按钮样式不满意可重新定义.video-js .vjs-big-play-button{/*这里的样式重写*/}。
为动态加载的 HTML 元素设置 Video.js
如果你的 web 页面或者应用是动态加载 video 标签的（ajax，appendChild，等等）,这样在页面加载后这个元素是不存在的，那么你会想要手动设置播放器而不是依靠 data-setup 属性。要做到这一点，首先将 data-setup 属性从 video 标签中移除掉，这样在播放器初始化的时候就不会混乱了。接下来，运行下面的 javascript ，有时在 Video.js 加载后，有时是在 video 标签被加载进 DOM 后，
| 1 2 3 |
|
videojs 方法中的第一个参数是你的 video 标签的 ID，用你自己的代替。
第二个参数是一个选项对象。它允许你像设置 data-setup 属性一样设置额外的选项。
第三个参数是一个 'ready' 回调。一旦 Video.js 初始化完成后，就会触发这个回调。
你也可以传入一个元素本身的引用来代替元素ID：
| 1 2 3 4 5 6 7 |
|
如果您无法播放内容，您得确保使用了 正确的格式，你的 HTTP 服务器可能无法提供正确的 MIME类型 的内容
以下感谢网友怀念★往事 的分享
var videoObj = videojs(“videoId”);
ready:
| 1 2 3 4 |
|
播放：
| 1 |
|
暂停：
| 1 |
|
获取播放进度：
| 1 |
|
设置播放进度：
| 1 |
|
视频持续时间，加载完成视频才可以知道视频时长，且在flash情况下无效
| 1 |
|
缓冲，就是返回下载了多少
| 1 |
|
百分比的缓冲
| 1 |
|
声音大小（0-1之间）
| 1 |
|
设置声音大小
| 1 |
|
取得视频的宽度
| 1 |
|
设置宽度：
| 1 |
|
获取高度
| 1 |
|
设置高度：
| 1 |
|
一步到位的设置大小：
| 1 |
|
全屏
| 1 |
|
离开全屏
| 1 |
|
添加事件
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
事件绑定
| 1 2 3 4 5 6 |
|
删除事件
| 1 |
|
一个页面中有多个视频，需要点击后触发bootstrap 的模态窗，再弹出视频
我个人的方法是：
html:
| 1 |
|
JS:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
