이 글에서는 부트스트랩 모달 박스에 영상을 삽입하는 구현 코드를 주로 소개합니다. 필요한 친구들은 참고하시면 됩니다부트스트랩 튜토리얼
다음 코드를 구현하는 것을 잊지 마세요. 부트스트랩 프레임워크
1. 효과
모달 상자를 클릭하면
제작한 MP4 및 기타 형식의 동영상이 팝업됩니다.
2. 부트스트랩 코드
1 2 3 4 5 6 7 8 9 | <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>
|
로그인 후 복사
3. 동영상 삽입 code
영상에 꼭 필요한 코드에 주목하세요. 호환성 문제를 해결해야 한다면 이 블로그(http://blog.csdn.net/w_linux/article/details/62890202
1 | <video src= "image/小“塍”故事.mp4" height= "500" controls preload= "metadata" ></video>
|
로그인 후 복사
)를 읽어보세요. 4. 전체 코드(몇 가지 변경했습니다. 여기에 버튼을 넣지 않았는데 큰 문제는 아닙니다)
1 2 3 4 5 6 7 8 9 | <a data-toggle= "modal" data-target= ".bs-example-modal-lg" >模态框</a>
<!-- Large modal -->
<p class= "modal fade bs-example-modal-lg" tabindex= "-1" role= "dialog" aria-labelledby= "myLargeModalLabel" >
</p><p class= "modal-dialog modal-lg" role= "document" >
</p><p class= "modal-content" >
<video src= "image/小“塍”故事.mp4" height= "500" controls preload= "metadata" ></video>
</p>
<p></p>
<p></p>
|
로그인 후 복사
위 내용은 Bootstrap 모달 상자에 비디오를 삽입하는 예제 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!