在同一个div内显示图片与视频（js删除与创建节点无缝切换）

最新推荐文章于 2022-10-26 08:37:30 发布

lk1521769532

最新推荐文章于 2022-10-26 08:37:30 发布

阅读量453

点赞数

分类专栏： JavaScript 文章标签： javascript js html jquery html5

本文链接：https://blog.csdn.net/lk1521769532/article/details/106443872

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<html>

<head>
    <meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head><body>
<h2>AJAX</h2>

<button class="btn btn-default btn-success btn-block" type="button" onclick="VideoPlay()">Video尝试</button>
<button class="btn btn-default btn-success btn-block" type="button" onclick="imagePlay()">Image尝试</button>
<div class="media-body" id="media-body-show">

</div>


<script>
function VideoPlay(){
	console.log("点击查看")
	f = document.getElementById("media-body-show");
    childs = f.childNodes;
    for(var i = childs.length - 1; i >= 0; i--) {
        alert(childs[i].nodeName);
        f.removeChild(childs[i]);
    }
	if(!document.getElementById("myNode")){
		var myNode = document.createElement("div");
		myNode.id="myNode"
		document.getElementById("media-body-show").appendChild(myNode);
		if(!document.getElementById("video1")){
			var video = document.createElement("video");
			video.id="video1"
			video.controls="controls"
			video.autoplay="autoplay"
			document.getElementById("myNode").appendChild(video);

			if(!document.getElementById("video_path")){
                var source = document.createElement("source");
                source.id="video_path"
                source.type="video/mp4"
                source.src="None"
                document.getElementById("video1").appendChild(source);
            }
		}
    
	}
	var video_src = "/static/media/video/"+currentVideoName;
	document.getElementById("video1").src= video_src;
}
</script>
<script>
function imagePlay(){
console.log("点击查看")
    f = document.getElementById("media-body-show");
    childs = f.childNodes;
    for(var i = childs.length - 1; i >= 0; i--) {
      alert(childs[i].nodeName);
      f.removeChild(childs[i]);
      }
    if(!document.getElementById("myNode")){
		var myNode = document.createElement("div");
		myNode.id="myNode"
		document.getElementById("media-body-show").appendChild(myNode);
        if(!document.getElementById("newImg")){
            var img = document.createElement("img");
            img.id="newImg";
            img.width="324";
            img.height="128";
            document.getElementById("myNode").appendChild(img);
        }
    }
}
</script>
	var image_src = "/static/media/image/"+currentVideoName;
		document.getElementById("newImg").src= image_src;
		document.getElementById("newImg").play()

</body>
</html>

边做边学，
这是我做前后端交互最近的一次，
这个demo实现了，在

<div class="media-body" id="media-body-show">
</div>

显示的区域，可以实现，视频与图片的无缝切换。
原生的js技术。
原理很简单，首先删除原来创建的节点，如果没有节点创建节点。渲染内容。
已经在项目中进行测试，不会报错。
边考研学习计算机，边学习技术，太难。而且还要逆袭…

lk1521769532

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在同一个div内显示图片与视频（js删除与创建节点无缝切换）

<html><head> <meta charset="utf-8"><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script></head><body><h2>AJAX</h2><button class="btn btn-default btn-success btn-block" type="
复制链接

扫一扫