如何使标记动态地标记进度的任何位置
我的标记有问题，我希望标记可以拉伸以标记进度条上的任何位置
如下图GIF
问题：我想选择进度条上的任意一点，并且能够拉伸标记，可以是多个标记点。
我不知道如何使用以下代码：
var player = videojs('demo');
player.markers({
markerStyle: {
'width':'9px',
'border-radius': '40%',
'background-color': 'orange'
},
markerTip:{
display: true,
text: function(marker) {
return "I am a marker tip: "+ marker.text;
}
},
breakOverlay:{
display: true,
displayTime: 4,
style:{
'width':'100%',
'height': '30%',
'background-color': 'rgba(10,10,10,0.6)',
'color': 'white',
'font-size': '16px'
},
text: function(marker) {
return "This is a break overlay: " + marker.overlayText;
},
},
markers: [
{time: 9.5, text: "this", overlayText: "1", class: "special-blue"},
{time: 16, text: "is", overlayText: "2"},
{time: 23.6,text: "so", overlayText: "3"},
{time: 28, text: "cool", overlayText: "4"}
]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://vjs.zencdn.net/4.2/video.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs-markers.js"></script>
<link href="http://vjs.zencdn.net/4.2/video-js.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs.markers.min.css" rel="stylesheet"/>
<video id="demo" width="400" height="210" controls class="video-js vjs-default-skin">
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
</video>
翻阅古今2回答
-
一只名叫tom的猫
在你想要指针的地方，只需将时间放在time: 20.5并增加 的宽度markerStyle: { 'width': '190px' }，这样你就会在视频进度条中得到长线！开始了var player = videojs('demo');player.markers({ markerStyle: { 'width':'190px', 'border-radius': '2px', 'background-color': 'orange' }, markerTip:{ display: true, text: function(marker) { return "I am a marker tip: "+ marker.text; } }, breakOverlay:{ display: true, displayTime: 120, style:{ 'width':'100%', 'height': '30%', 'background-color': 'rgba(10,10,10,0.6)', 'color': 'white', 'font-size': '16px' }, text: function(marker) { return "This is a break overlay: " + marker.overlayText; }, }, markers: [ {time: 20.5, text: "this", overlayText: "1", class: "special-blue"}, ]});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="http://vjs.zencdn.net/4.2/video.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs-markers.js"></script><link href="http://vjs.zencdn.net/4.2/video-js.css" rel="stylesheet"/><link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs.markers.min.css" rel="stylesheet"/><video id="demo" width="400" height="210" controls class="video-js vjs-default-skin"> <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm"></video>你可以在这里学习更多关于docs 的所有内容。如果您有任何问题，请告知我们！快乐编码！ -
慕侠2389804
一种方法是在 seekbar 上挂钩mousedown和mousemove事件。使用自定义类在 mousedown 上添加标记。然后在 mousemove 上计算移动并使用自定义类将宽度添加到标记元素。看这个例子：var player = videojs('demo');// Set variable so we can add values laterlet lastAddedMarker = null;let moving = false;let seekBar = player.controlBar.progressControl.seekBar;let startPoint = 0;// When seekbar is clicked add marker and set values to startpoint and set moving flag to trueseekBar.on('mousedown', function(event) { var seekBarEl = this.el(); startPoint = videojs.dom.getPointerPosition(seekBarEl, event).x; player.markers.add([{ time: player.currentTime(), text: "I'm new", overlayText: "I'm new", class: 'custom-marker' }]); lastAddedMarker = jQuery(".custom-marker"); moving = true;});// When user moves while on seekbar get the width and set it to 'custom-marker' classseekBar.on("mousemove", function(e) { if (moving) { let seekBarEl = this.el(); let movingPoint = videojs.dom.getPointerPosition(seekBarEl, event).x; let containerWidth = jQuery(seekBarEl).width(); let markerWidth = containerWidth * (movingPoint - startPoint); lastAddedMarker.width(markerWidth + "px"); }});jQuery(document).on("mouseup", function() { moving = false;});player.markers({ markerStyle: { 'width': '9px', 'border-radius': '2px', 'background-color': 'orange' }, markerTip: { display: true, text: function(marker) { return "I am a marker tip: " + marker.text; } }, onMarkerClick: function(marker) { console.log("AS"); }, breakOverlay: { display: true, displayTime: 4, style: { 'width': '100%', 'height': '30%', 'background-color': 'rgba(10,10,10,0.6)', 'color': 'white', 'font-size': '16px' }, text: function(marker) { return "This is a break overlay: " + marker.overlayText; }, }, markers: []});.vjs-marker { position: absolute; left: 0; bottom: 0; opacity: 1; height: 100%; transition: opacity .2s ease; -webkit-transition: opacity .2s ease; -moz-transition: opacity .2s ease; z-index: 100}.vjs-break-overlay,.vjs-tip { visibility: hidden; position: absolute; z-index: 100000}.vjs-marker:hover { cursor: pointer; -webkit-transform: scale(1.3, 1.3); -moz-transform: scale(1.3, 1.3); -o-transform: scale(1.3, 1.3); -ms-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3)}.vjs-tip { display: block; opacity: .8; padding: 5px; font-size: 10px; bottom: 14px}.vjs-tip .vjs-tip-arrow { background: url(data:image/gif;base64,R0lGODlhCQAJAIABAAAAAAAAACH5BAEAAAEALAAAAAAJAAkAAAIRjAOnwIrcDJxvwkplPtchVQAAOw==) bottom left no-repeat; bottom: 0; left: 50%; margin-left: -4px; position: absolute; width: 9px; height: 5px}.vjs-tip .vjs-tip-inner { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; padding: 5px 8px 4px; background-color: #000; color: #fff; max-width: 200px; text-align: center}.vjs-break-overlay { top: 0}.vjs-break-overlay .vjs-break-overlay-text { padding: 9px; text-align: center}<link href="https://vjs.zencdn.net/7.5.5/video-js.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.6.5/video.min.js"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs.markers.min.css" rel="stylesheet" /><script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-markers/0.7.0/videojs-markers.min.js"></script><video id="demo" width="400" height="210" controls class="video-js vjs-default-skin"> <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm"></video>
随时随地看视频慕课网APP
相关分类
JavaScript