Rumah > hujung hadapan web > tutorial js > 分享Bootstrap模态框插入视频的实例代码

分享Bootstrap模态框插入视频的实例代码

PHPz
Lepaskan: 2018-10-13 16:57:41
asal
4983 orang telah melayarinya

这篇文章主要介绍了Bootstrap模态框插入视频的实现代码,需要的朋友可以参考下Bootstrap教程

下面代码实现别忘了前提是要在bootstrap框架下使用

一、效果

点击模态框

这里写图片描述

跳出自己已做好的MP4等格式视频

这里写图片描述

二、Bootstrap代码


<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">模态框</button>

<p class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
 <p class="modal-dialog modal-lg" role="document">
 <p class="modal-content">
  ...< --这里写插入视频代码 -- >
 </p>
 </p>
</p>
Salin selepas log masuk

三、插入视频代码

注意video一些必要代码。如需解决兼容可以看这篇博客http://blog.csdn.net/w_linux/article/details/62890202


 <video src="image/小“塍”故事.mp4" height="500" controls preload="metadata"></video>
Salin selepas log masuk

四、总代码(我这里做了点改动,没有放在button里,问题不大)


模态框
 

 

Salin selepas log masuk

Atas ialah kandungan terperinci 分享Bootstrap模态框插入视频的实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Isu terkini
Tiada tutorial video tersuai bootstrap
daripada 1970-01-01 08:00:00
0
0
0
Laravel: Masalah menggunakan bootstrap secara setempat
daripada 1970-01-01 08:00:00
0
0
0
html5 - Masalah dengan gaya pengubahsuaian bootstrap
daripada 1970-01-01 08:00:00
0
0
0
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan