<!DOCTYPE html> <html> <head> <title>videojs</title> <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"> <style type="text/css"> #example_video{ width: 640px; height: 340px; } </style> </head> <body> <video id="example_video" class="video-js vjs-defalut-skin" controls preload="metadata"> <source src="http://hc.yinyuetai.com/uploads/videos/common/FA6B0169A324DD75A87E1C84F4B31399.mp4?sc=48ed02b41892022b&br=780&vid=3365773&aid=22&area=HT&vst=0" type="video/mp4"> </video> <div class="btn-group"> <button type="button" id="btn-prev">上一個打點位置</button> <button type="button" id="btn-next">下一個打點位置</button> <div> <span>所有標記時間增加：</span> <input type="text" name="" id="add-time"> <span>秒</span> <button type="butotn" id="btn-confirm">確認增加</button> </div> <button type="button" id="btn-del">刪除標記</button> <button type="button" id="btn-add">添加標記</button> <button type="button" id="btn-reset">重置標記</button> </div> <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> <script type="text/javascript"> var player = videojs('example_video'); //實例化對象 player.markers({ markerStyle:{ //標記樣式 'width':'7px', 'border-radius': '0%', 'background-color': 'orange' }, markerTip:{ //懸停標記提示對象 display:true, //是否顯示markerTips /* 用於動態構建標記提示文本的回調函數。 只需返回一個字符串，參數標記是傳遞給插件的標記對象 */ text: function(marker) { return "This is a break: " + marker.text; } }, breakOverlay:{ //每個標記的中斷覆蓋選項 display: true, //是否顯示疊加層 displayTime: 3, style:{ //為疊加層添加css樣式 color:"red" }, text: function(marker) { //回調函數動態構建疊加文本 return "This is an break overlay: " + marker.text; } }, onMarkerReached:function(marker, index){ //只要播放到標記的時間間隔，就會出發此回調函數 }, onMarkerClick:function(marker,index){ //單擊標記時會觸發此回調函數， /* 單擊標記的默認行為是在視頻中尋找該點， 但是，如果onMarkerClick返回false，則將阻止默認行為 */ }, markers:[ { time:9.5, text:"this" }, { time:30.5, text:"is" }, { time:60.5, text:"demo" }, { time:90.5, text:"markers" }, { time:120.5, text:":)" }, ], }); /****** 返回插件中當前標記的數組，按升序時間排序 ******/ var getMarkers = player.markers.getMarkers(); /****** 從視頻中的當前時間轉到下一個標記。 如果沒有下一個標記，那么什么都不做 ******/ $("#btn-next").click(function(){ player.markers.next(); }) /****** 從視頻中的當前時間轉到上一個標記。 如果沒有上一個標記，那么什么都不做 ******/ $("#btn-prev").click(function(){ player.markers.prev(); }) /****** 允許動態修改標記時間（傳入原始標記對象） ******/ $("#btn-confirm").click(function(){ var markers = player.markers.getMarkers(); var add_time = parseInt( $("#add-time").val() ); console.log(add_time); for (var i = 0; i < markers.length; i++) { markers[i].time += add_time; } //調用updateTime以立即反應UI中的更改 player.markers.updateTime(); }) /****** 刪除給定索引數組中的標記（從0開始） ******/ $("#btn-del").click(function(){ //player.markers.remove([1,3]); //刪除所有標記 player.markers.removeAll(); }) /****** 動態添加新標記 ******/ $("#btn-add").click(function(){ player.markers.add([{ time: 40, text: "I'm added dynamically" }]); }) /****** 重置視頻中的所有標記（相當於removeAll后再設置） ******/ $("#btn-reset").click(function(){ player.markers.reset([{ time: 40, text: "I'm new" }, { time:20, text: "I'm new too" }]); }) </script> </body> </html>