1.功能要求实现视频的实时播放和回放,并且在实时和回放时要求可以给视频打断点,使用两个第三方库来辅助完成此功能。引入以下文件
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/videojs-markers/0.7.0/videojs.markers.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script> <script src="https://cdn.bootcss.com/videojs-markers/0.7.0/videojs-markers.js"></script>
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 |
|