织梦、bootstrap中如何插入视频代码

我们都知道织梦后台不支持视频插入功能,无法满足越来越多的平台内容需要,如果解决这个问题那?这里我介绍一种比较直接的方法。

织梦dedecms后台插入文章是可以切换为“源码”形式,在这里大家可以根据以往html和bootstrap的知识进行代码的写入。

织梦中源码功能

1.插入以下代码(bootstrap中的模态框功能,视频地址记得更改为自己的视频地址)

<a data-toggle="modal" data-target=".bs-example-modal-lg">模态框</a>
 <!-- Large modal -->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
 <div class="modal-dialog modal-lg" role="document">
 <div class="modal-content">
  <video src="images/111.mp4" height="500" controls preload="metadata"></video>
 </div>
 </div>
</div>

2.发布文章,这时候我们会发现前端页面显示效果为

微信截图_20201201164337.png

3.只有点击文字才会弹出视频远远是不能满足我们的需求,如何处理那,我们可以将a标签的模态框转为img标签,也就是做一个假的图片视频。代码如下

<a data-target=".bs-example-modal-lg" data-toggle="modal"><img alt="波纹管-波纹涵管如何进行安装" class="img-responsive" src="/uploads/allimg/2020/1-201201161541391.png" style="margin:0 auto" /></a> <!-- Large modal -->
<div aria-labelledby="myLargeModalLabel" class="modal fade bs-example-modal-lg" role="dialog" tabindex="-1">
	<div class="modal-dialog modal-lg" role="document">
		<div class="modal-content">
			<video controls="" height="500" preload="metadata" src="https://www.hshdlq.cn/templets/huide/images/111.mp4">
				&nbsp;</video>
		</div>
	</div>
</div>

到这一步基本就可以实现我们想要的样子了,如果大家还有其他好的方法,可以留言或者联系作者。

参考地址:https://www.hshdlq.cn/khdy/252.html

相关文章