javascript - jquery를 통해 동적으로 비디오 src 값을 설정하면 비디오를 재생할 수 없습니까?

Question

으아악

데모는 여기 https://jsfiddle.net/r9u1cn7o/
다른 라벨을 클릭하면 해당 동영상이 재생되는 팝업 상자가 나타납니다. 그런데 jquery를 통해 src에 값을 성공적으로 할당했지만 그렇지 않습니다. 왜 재생할 수 없는지 모르시나요?

Answer 1

소스의 src 값은 실제로 jQuery를 통해 성공적으로 할당되었습니다. 디버깅 관점에서 브라우저는 해당 비디오를 얻기 위한 요청을 시작하지 않고 단순히 a 태그의 src에 있는 값을 소스에 할당합니다.

그러나 이렇게 하면 브라우저는 비디오 파일을 얻기 위해 주소를 요청합니다:

으아아아

따라서 동영상에 소스 태그가 있으면 브라우저는 렌더링 후 자동으로 주소를 가져오지만, 주소가 변경되더라도 브라우저는 다시 주소를 가져오지 않는다는 것을 유추할 수 있습니다. 그러나 소스 태그를 동적으로 삽입하면 브라우저가 리플로우를 트리거하여 재생을 위해 해당 주소에서 파일을 얻을 수 있습니다.

Answer 2

으아아아

소스의 src는 렌더링 중에 한 번만 확인됩니다.
src를 동적으로 조정하려면 비디오부터 시작해야 합니다.
$("#video-box video" ).prop("src",src)

Answer 3

소스 태그를 사용하지 말고 대신 attr()를 사용하세요. 그리고, 동영상 태그의 너비와 높이를 스타일에 쓰지 말고 빼주세요~

Answer 4

jsfidle은 동영상을 삽입할 수 없습니다. 그냥 로컬로 변경하세요.

Answer 5

비디오 태그가 지원하는 비디오 형식에는 (1) H.264로 인코딩된 mp4 파일 (2) webm (3) ogg가 포함됩니다. 다른 접미사가 붙은 파일은 특허 문제 및 기타 문제로 인해 일시적으로 지원되지 않습니다. 그것

Answer 6

play() 이벤트만 추가하세요