Bootstrap 모달 비디오 소스를 동적으로 변경

비토 안 돌리니

비디오 src와 비디오에 대한 정보를 보관하는 DB가 있습니다 .

while 루프로 해당 변수를 가져 와서 jquery스크립트로 전달 하지만 비디오의 src속성이 정확 하더라도 비디오가 새 소스 링크를 재생하지 않습니다.

Bootstrap Docs에 제공된 코드를 사용했습니다.

이것은 페이지에서 사용 중인 코드 입니다.

<div class="pb-2 pr-0 col col-xs-12 col-sm-6 col-md-3 col-lg-2 col-xl-2" id="item">
  <a href="#" data-toggle="modal" data-target="#exampleModal" data-user="9GAG" data-link="https://video.twimg.com/amplify_video/1343598947286183946/vid/720x900/Jg8plRtix-yjzP6g.mp4">
    <img class="rounded" src="https://pbs.twimg.com/amplify_video_thumb/1343598947286183946/img/_WUUCNjodgFAwfdw.jpg:thumb" alt="9GAG">
  </a>
</div>

**This is my Modal HTML**

<div id="myVideo">
    <video id="myVideo" width="1280" height="720" controls poster="" class="myvideo img-fluid">
        <source src="" type="video/mp4">
    </video>
</div>

이것은 JS입니다

    $('#exampleModal').on('show.bs.modal', function (event) {
       var button = $(event.relatedTarget)
       var link = button.data('link')
       var user = button.data('user')
       var modal = $(this)
       moda1l.find('.modal-title').text(user)
       modal.find('.video source').attr('src', link)
    })    

해결책을 찾기 위해 주제를 검색했는데 비슷한 문제와 해결책이 있었지만 신인으로서이 해결책을 내 코드에 적용 할 수 없었습니다. 도움을 주셔서 미리 감사드립니다.

-솔루션 후 편집- 최종 js 코드는 다음과 같습니다.

//to pause the video if modal closed
$('#exampleModal').on('hide.bs.modal', function (event) {
   let video = document.getElementById('myVideo');
   video.pause();
});
$('#exampleModal').on('show.bs.modal', function (event) {
   var button = $(event.relatedTarget)
   var link = button.data('link')
   var user = button.data('user')
   var modal = $(this)
   modal.find('.modal-title').text(user)
   $('#myVideo source').attr('src', link)
   $('#myVideo')[0].load();
   //autoplay if modal opened
   $('#myVideo')[0].play();
})

소스 선택기를 변경 한 다음 비디오를로드 ()해야합니다.

$('#exampleModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget)
    var link = button.data('link')
    var user = button.data('user')
    var modal = $(this)
    modal.find('.modal-title').text(user)
    $('#myVideo source').attr('src', link)
    $('#myVideo')[0].load();
})

데모

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

Flutter 비디오 플레이어가 비디오 소스를 동적으로 변경

분류에서Dev

파일 크기 감소를 위해 RGB 비디오를 그레이 스케일 비디오로 변환

분류에서Dev

Angular 9 동적 경로를 사용하여 동적으로 모듈 가져 오기

분류에서Dev

nuxt js에서 비디오 태그의 src를 동적으로 변경

분류에서Dev

hover / mouseover html시 비디오 소스를 이미지 소스로 변경

분류에서Dev

HTML, JSON의 이미지 소스를 동적으로 변경

분류에서Dev

반응 메모로 동적으로 스타일 변경

분류에서Dev

SlidingDrawer 콘텐츠 너비를 동적으로 변경

분류에서Dev

모든 비디오를 HD 비디오로 변환

분류에서Dev

Handbrake로 비디오 해상도 변경-아나모픽 및 모듈러스 매개 변수

분류에서Dev

재생 목록의 다음 항목이 jwplayer 6.8에로드 될 때마다 관련 비디오를 동적으로 변경합니다.

분류에서Dev

와이어 버스를 모듈로 전달할 때 비트 변경

분류에서Dev

Gridview의 데이터 소스를 동적으로 변경

분류에서Dev

클릭시 비디오 소스 변경

분류에서Dev

클릭시 비디오 소스 변경

분류에서Dev

브라우저 / 비디오 버퍼를 기다리지 않고 런타임 동안 여러 비디오 재생 및 소스 변경

분류에서Dev

브라우저 / 비디오 버퍼를 기다리지 않고 런타임 동안 여러 비디오 재생 및 소스 변경

분류에서Dev

Bootstrap 모달 내부에서 동적으로 차트를 생성하려고 시도하여 offsetWidth 오류가 발생합니다.

분류에서Dev

비디오의 오디오 스트림 제거-FFMPEG로 오디오 또는 비디오를 변환하지 않고 재귀 적으로

분류에서Dev

src Phonegap + javascript를 동적으로 변경할 때 코드에서 로컬 비디오 재생

분류에서Dev

nodejs는 시작 경로 만 비동기 적으로 전달하는 모든 파일 및 디렉토리를 나열하거나 제거합니다.

분류에서Dev

미리로드하여 HTML5 비디오 소스 변경

분류에서Dev

Bootstrap에서 모달의 너비와 높이 변경

분류에서Dev

React Bootstrap 모달의 내용을 어떻게 동적으로 변경합니까?

분류에서Dev

뷰를 모달 및 비 모달로 재사용 (angularjs + bootstrap-ui)

분류에서Dev

소스가 변경 될 때 비디오를 동적으로 재생하는 방법

분류에서Dev

창 너비에 따라 div 위치를 동적으로 변경

분류에서Dev

기본적으로 모든 비디오에 대해 vlc가 재생하는 비디오의 오디오를 음소거하는 방법이 있습니까?

분류에서Dev

스케일링하는 동안 비디오 요소의 크기를 부트 스트랩 모달에 적용

Related 관련 기사

  1. 1

    Flutter 비디오 플레이어가 비디오 소스를 동적으로 변경

  2. 2

    파일 크기 감소를 위해 RGB 비디오를 그레이 스케일 비디오로 변환

  3. 3

    Angular 9 동적 경로를 사용하여 동적으로 모듈 가져 오기

  4. 4

    nuxt js에서 비디오 태그의 src를 동적으로 변경

  5. 5

    hover / mouseover html시 비디오 소스를 이미지 소스로 변경

  6. 6

    HTML, JSON의 이미지 소스를 동적으로 변경

  7. 7

    반응 메모로 동적으로 스타일 변경

  8. 8

    SlidingDrawer 콘텐츠 너비를 동적으로 변경

  9. 9

    모든 비디오를 HD 비디오로 변환

  10. 10

    Handbrake로 비디오 해상도 변경-아나모픽 및 모듈러스 매개 변수

  11. 11

    재생 목록의 다음 항목이 jwplayer 6.8에로드 될 때마다 관련 비디오를 동적으로 변경합니다.

  12. 12

    와이어 버스를 모듈로 전달할 때 비트 변경

  13. 13

    Gridview의 데이터 소스를 동적으로 변경

  14. 14

    클릭시 비디오 소스 변경

  15. 15

    클릭시 비디오 소스 변경

  16. 16

    브라우저 / 비디오 버퍼를 기다리지 않고 런타임 동안 여러 비디오 재생 및 소스 변경

  17. 17

    브라우저 / 비디오 버퍼를 기다리지 않고 런타임 동안 여러 비디오 재생 및 소스 변경

  18. 18

    Bootstrap 모달 내부에서 동적으로 차트를 생성하려고 시도하여 offsetWidth 오류가 발생합니다.

  19. 19

    비디오의 오디오 스트림 제거-FFMPEG로 오디오 또는 비디오를 변환하지 않고 재귀 적으로

  20. 20

    src Phonegap + javascript를 동적으로 변경할 때 코드에서 로컬 비디오 재생

  21. 21

    nodejs는 시작 경로 만 비동기 적으로 전달하는 모든 파일 및 디렉토리를 나열하거나 제거합니다.

  22. 22

    미리로드하여 HTML5 비디오 소스 변경

  23. 23

    Bootstrap에서 모달의 너비와 높이 변경

  24. 24

    React Bootstrap 모달의 내용을 어떻게 동적으로 변경합니까?

  25. 25

    뷰를 모달 및 비 모달로 재사용 (angularjs + bootstrap-ui)

  26. 26

    소스가 변경 될 때 비디오를 동적으로 재생하는 방법

  27. 27

    창 너비에 따라 div 위치를 동적으로 변경

  28. 28

    기본적으로 모든 비디오에 대해 vlc가 재생하는 비디오의 오디오를 음소거하는 방법이 있습니까?

  29. 29

    스케일링하는 동안 비디오 요소의 크기를 부트 스트랩 모달에 적용

뜨겁다태그

보관