Bootstrap 3-반응 형 mp4 비디오

Bootstrap 3-반응 형 mp4 비디오

---

부트 스트랩 사이트에서 좋은 해결책을 찾으려고했지만 아직 이에 대한 답을 얻지 못했습니다. 나는 이것으로 고생하는 유일한 사람이 될 수 없다고 생각하지만 나를 도운 것을 찾을 수 없었다.

내 웹 사이트에 mp4 비디오를 삽입하려고합니다. 문제는 iframe 태그를 사용하면 자동 재생 및 루프를 사용할 수 없다는 것입니다. 그 때문에 비디오 태그 (또는 자동 재생 및 루프를 지원하는 다른 것)로 해결하고 싶습니다. 그 후 개체 태그를 사용하여 비디오를 반응 형으로 만들려고했지만 작동하지 않았습니다. 아래에서 볼 수있는 내 코드 (당신에게 보여주기 위해)에 넣었지만 :

<div align="center">
   <object class="embed-responsive-item">
     <video autoplay loop >
       <source src="file.mp4" />
     </video>
   </object>
 </div>

누구든지이 문제를 해결할 수 있기를 바랍니다.

---

귀하의 사이트에 다음과 같은 비디오를 삽입하려는 것은 내 이해입니다.

• 반응이 있음
• 자동 재생 및 루프 모두 허용
• 부트 스트랩 사용

이 데모 는 바로 여기 에 있습니다. 여기 의 지침 에 따라 object / embed / iframe 태그 외부에 다른 embed 클래스를 배치 해야합니다.하지만 지정되지 않은 경우에도 object 태그 대신 video 태그를 사용할 수도 있습니다.

<div align="center" class="embed-responsive embed-responsive-16by9">
    <video autoplay loop class="embed-responsive-item">
        <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
    </video>
</div>

---

동영상 태그에 class = "img-responsive"를 추가하기 만하면됩니다. 현재 프로젝트에서이 작업을 수행하고 있으며 작동합니다. 아무것도 포장 할 필요가 없습니다.

<video class="img-responsive" src="file.mp4" autoplay loop/>

---

이 코드를 사용하면 모든 권한을 가진 반응 형 비디오 플레이어를 얻을 수 있습니다.

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" width="640" height="480" src="https://www.youtube-nocookie.com/embed/Lw_e0vF1IB4" frameborder="0" allowfullscreen></iframe>
</div>

---

이것은 나를 위해 일했습니다.

<video src="file.mp4" controls style="max-width:100%; height:auto"></video>

---

한 페이지의 여러 동영상에 대한 팁 : 최근 모든 동영상의 프레임 속도가 다음과 같아야 함을 발견 한 후 모달 (부트 스트랩 3)에 16 개의 동영상이있는 페이지에서 Chrome 또는 Firefox (IE에서 잘 재생 됨)에서 mp4 재생이 안되는 문제를 해결했습니다. 같은. 25fps에서 6 개의 비디오와 29.97fps에서 12 개의 비디오가있었습니다 ... 모든 25fps 버전으로 렌더링 한 후 모든 브라우저에서 모든 것이 원활하게 실행됩니다.

참조 URL : https://stackoverflow.com/questions/26040136/bootstrap-3-responsive-mp4-video