> 웹 프론트엔드 > JS 튜토리얼 > Bootstrap 모달 상자에 비디오를 삽입하는 예제 코드 공유

Bootstrap 모달 상자에 비디오를 삽입하는 예제 코드 공유

PHPz
풀어 주다: 2018-10-13 16:57:41
원래의
4926명이 탐색했습니다.

이 글에서는 부트스트랩 모달 박스에 영상을 삽입하는 구현 코드를 주로 소개합니다. 필요한 친구들은 참고하시면 됩니다부트스트랩 튜토리얼

다음 코드를 구현하는 것을 잊지 마세요. 부트스트랩 프레임워크

1. 효과

모달 상자를 클릭하면

Bootstrap 모달 상자에 비디오를 삽입하는 예제 코드 공유

제작한 MP4 및 기타 형식의 동영상이 팝업됩니다.

Bootstrap 모달 상자에 비디오를 삽입하는 예제 코드 공유

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿