实现视频窗口在html中随意拖动位置

最新推荐文章于 2022-07-28 11:21:25 发布

chiZCzhang

最新推荐文章于 2022-07-28 11:21:25 发布

阅读量3.6k

点赞数 1

分类专栏： div拖动文章标签：拖动视频窗口拖动div 视频关键帧

本文链接：https://blog.csdn.net/chiZCzhang/article/details/89966563

版权

div拖动专栏收录该内容

1 篇文章 0 订阅

订阅专栏

将视频放入div中填满整个div，实现在页面上的随意拖动

此处放一个小的demo 附加视频的关键帧的添加

有需要的拿走不谢


<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>video</title>
    <!-- Video.js -->
    <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
	
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
	
    <script src="https://unpkg.com/video.js/dist/video.min.js"></script>
    <script src="https://unpkg.com/flv.js/dist/flv.min.js"></script>
    <script src="https://unpkg.com/videojs-flvjs/dist/videojs-flvjs.min.js"></script>
	
	<script src="https://cdn.bootcss.com/videojs-markers/0.7.0/videojs-markers.js"></script>
	<link href="https://cdn.bootcss.com/videojs-markers/0.7.0/videojs.markers.min.css" rel="stylesheet">
	<style type="text/css">
.CsOuterDiv {
	width:512px;
	height:292px;
	background-color:white;
	position:absolute;
	top:50%;
	left:50%;
	transform:translateX(-50%) translateY(-50%);
	-moz-transform:translateX(-50%) translateY(-50%);
	-webkit-transform:translateX(-50%) translateY(-50%);
	-ms-transform:translateX(-50%) translateY(-50%);
	border-radius:5px;
	box-shadow:3px 3px  10px black;
}

	</style>

</head>
 
<body>
	<div id="idOuterDiv" class="CsOuterDiv">
 <div>
        <video id="videojs-flvjs-player" class="video-js vjs-default-skin vjs-big-play-centered"  width="512" height="292"> </video>
    </div>
	</div>
	
   
<div class="btn-group" role="group" aria-label="...">
    <button class="dynamic-demo-prev btn btn-default" type="button">Prev</button>
    <button class="dynamic-demo-next btn btn-default" type="button">Next</button>
    
    <button class="dynamic-demo-shift btn btn-default" type="button">Shift 1 sec</button>
    <button class="dynamic-demo-remove-first btn btn-default" type="button">Remove 1st</button>
    <button class="dynamic-demo-remove-all btn btn-default" type="button">Remove all</button>
    <button class="dynamic-demo-destroy btn btn-default" type="button">Destroy</button>
</div>
<div>
		时间：<input type="text" id="time">
		内容：<input type="text" id="text">
		<input type="button" onclick="addd()" value="确定">
</div>

</body>
 
</html>
<script>
	function dragFunc(id) {
	    var Drag = document.getElementById(id);
	    Drag.onmousedown = function(event) {
	        var ev = event || window.event;
	        event.stopPropagation();
	        var disX = ev.clientX - Drag.offsetLeft;
	        var disY = ev.clientY - Drag.offsetTop;
	        document.onmousemove = function(event) {
	            var ev = event || window.event;
	            Drag.style.left = ev.clientX - disX + "px";
	            Drag.style.top = ev.clientY - disY + "px";
	            Drag.style.cursor = "move";
	        };
	    };
	    Drag.onmouseup = function() {
	        document.onmousemove = null;
	        this.style.cursor = "default";
	    };
	};
	dragFunc("idOuterDiv");
function addd(){
	var time = $("#time").val();
	var text = $("#text").val();
	try{
		var ftime = parseFloat(time);
		console.log(ftime);
		addtext(ftime,text);
	}catch(e){
		console.log(e);
	}

}

</script>

<script>
//播放flv格式视频

var flvUrl = "http://ppooiruc8.bkt.clouddn.com/fanghuajuedai.flv";
 
var player = videojs('videojs-flvjs-player', {
    techOrder: ['html5', 'flvjs'],
    flvjs: {
        mediaDataSource: {
            isLive: true,
            cors: true,
            withCredentials: false,
        },
    },
    sources: [{
        src: flvUrl,
        type: 'video/mp4'
    }],
    controls: true,
    preload: "none"
}, function onPlayerReady() {
    console.log('player ready')
 
    player.on('error', (err) => {
        console.log('first source load fail')
 
        player.src({
            src: flvUrl,
            type: 'video/x-flv'
        });
 
        player.ready(function() {
            console.log('player ready')
            player.load();
            player.play();
        });
    })
});
</script>


<script>
//插入帧预览文字

var player = videojs('videojs-flvjs-player');
player.markers({
   breakOverlay:{
      display: true
   },
   onMarkerClick: function(marker){
      $('.dynamic-demo-events').append('<li class="list-group-item">Marker click: '+marker.time+'</li>');
   },
   onMarkerReached: function(marker){
      $('.dynamic-demo-events').append('<li class="list-group-item">Marker reached: '+marker.time+'</li>');
   }
});

// setup control handlers
$(".dynamic-demo-prev").click(function(){
   player.markers.prev();
});
$(".dynamic-demo-next").click(function(){
   player.markers.next();
});
$(".dynamic-demo-add-random").click(function(){
//还是只能输入多少秒 等等
//可以让用户输入多少分多少秒 之后js进行计算
//添加的值是需要传入后台进行保存
   var randomTime = Math.floor((Math.random() * parseInt(player.duration())) + 1);
	console.log(randomTime+"随机值");
	console.log(player.duration()+"视频总时长，不能超过当前市场");
   // come up with a random time
   player.markers.add([{
      time: randomTime,  //时间
      text: "I'm new",   //内容
      overlayText: "I'm new"  //暂时不知道是什么
   }]);
});

function addtext(time,text){
   player.markers.add([{
      time: time,  //时间
      text: text  //内容
   }]);
   
}

$(".dynamic-demo-shift"). click(function(){
   var markers = player.markers.getMarkers();
   for(var i = 0; i < markers.length; i++) {
      markers[i].time += 1;
   }
   player.markers.updateTime();
});
$(".dynamic-demo-remove-first").click(function(){
   player.markers.remove([0]);
});
$(".dynamic-demo-remove-all").click(function(){
   player.markers.removeAll();
});
$(".dynamic-demo-destroy").click(function(){
   player.markers.destroy();
});
</script>

chiZCzhang

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
实现视频窗口在html中随意拖动位置

将视频放入div中填满整个div，实现在页面上的随意拖动此处放一个小的demo 附加视频的关键帧的添加有需要的拿走不谢<!DOCTYPE html><html lang="en"> <head> <title>video</title>  <l...
复制链接

扫一扫