비디오에서 자르기 - 자르기 선택 내에서만 비디오가 표시됩니다.

Question

비디오 소스에 Jcrop이 있습니다. <img src ="http://ip_address/stream"> html 페이지에는 비디오가있는 컨테이너가 표시되지만 스틸 이미지입니다. 이미지를 클릭하면 업데이트됩니다. 동영상 영역을 자르려면 클릭/드래그를 한 후 자르기 선택 영역에 비디오 업데이트를 표시합니다.

자르기를 선택하기 전에 비디오 스트림이 지속적으로 업데이트되도록하려면 어떻게해야합니까?

편집 :이 관계없이 선택을하는 데의 네트워크 모니터, 지속적으로 비디오를 업데이트 페이지의 상태 코드에, 요소 도구를 검사하여이 입니다 다음과 페이지의 상태 코드 반면 200 OK

클릭하지 않는 한 업데이트하지 않습니다 비디오는 다음과 같습니다마다 (예를 들어) 1 초 이미지의 새로 고침을 강제하기 위해 304 Not Modified

Answer 1

당신이 필요로 :

1. 를 사용하여 자바 스크립트상기 영상 소스 Cachebust
2. 3,파일명 다음 코드

   <img id="vidimg" src="Assets/img.jpg"> 
   <script> 
       setInterval(function(){ 
        document.getElementById("vidimg").src="Assets/img.jpg" + 
        "?cachebuster=" + Math.round(new Date().getTime()/1000).toString() }, 
       1000); 
   </script> 
   

   setInterval(... ,1000); 인스턴스

변경되지 않은 경우는 1,000 밀리 초 (초에 한번씩) 반복 내의 함수를 발생 - 사용중인 이미지 소스의 다운로드 속도/새로 고침 빈도에 따라이 값을 조정할 수 있습니다. 함수는 여기에서했던 것처럼 인라인 될 수 있습니다. 또는 더 복잡한 논리가 포함되어 있으면 명명 된 함수로 만들고 참조 할 수 있습니다.

document.getElementById("vidimg").src="Assets/img.jpg"은 이미 이미지 소스를 다시로드하기 만하면 이미지가 이미 캐시 된 것과 동일하게 보이기 때문에 브라우저가 똑똑해지기 때문에 브라우저에서 파일 이름에 임의의 매개 변수를 추가해야 할 수 있습니다 서버에서 다시 가져 오기를 강제하기 때문에 현재 시간을 기반으로 매개 변수를 추가하는 + "?cachebuster=" + Math.round(new Date().getTime()/1000).toString()이됩니다.

소스에 파일 이름이 없으면 (질문의 예와 같이) 캐시 버스터를 추가해도 작동합니다.

설명하는 소스와 같은 소스에 액세스 할 수 없어 테스트 할 수 없었지만 이론적으로는 작동해야합니다. 또는 <video src ="http://ip_address/stream">을 사용하여 액세스 할 수 있습니까?