페이지가 완전히로드 될 때까지 객체/비디오 태그를 HTML 밖으로 유지하는 방법은 무엇입니까?

youtube 및 vimeo에서 퍼가기 동영상으로 가득 찬 페이지를 만들었습니다. 그리고로드 시간은 끔찍합니다! 그것은 그들이 제대로로드 될 때까지 내 노트북을 완전히 동결시킵니다.페이지가 완전히로드 될 때까지 객체/비디오 태그를 HTML 밖으로 유지하는 방법은 무엇입니까?

다른 기사에서 볼 수있는 방법은 객체 또는 비디오 태그를 HTML 밖으로 유지 한 다음 페이지가로드 된 후 추가하는 것입니다. 나는 그 후 행할 수있는 방법을 찾아 내려고 노력해 왔습니다!

다른 웹 사이트에서도 비디오가 완전히 나올 때까지 태그 뒤에 로딩 gif가 있습니다.

이러한 방법이나 다른 방법 중 하나를 수행하는 방법에 대한 조언은 훌륭합니다!

일부 동영상 삽입 코드 :

<iframe src="http://player.vimeo.com/video/57564747" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

출처

2013-03-22 maxmitch

지금까지 해보신 것은 무엇입니까? 페이지의 onload 이벤트가 발생하면 자바 스크립트를 사용하여 페이지에 항목을 추가하는 방법을 살펴 보았습니까? –

좋은 생각 나는 지금 그것에 대해 조사 할 것이다. 감사합니다. – maxmitch

또한 비디오가 수행중인 사전로드를 조사하십시오. 예를 들어 video 태그에는 none으로 설정할 수있는 preload 속성이 있습니다. – slamborne

필요할 때만로드하는 것이 좋습니다.

동영상이있는 곳에 더미 사진을 올려 놓습니다. 그림을 클릭하면 jQuery 또는 JS를 통해 내용을로드합니다.

<div id='video-anchor'> 
    <img id='dummy' src='http://b.vimeocdn.com/ts/403/127/403127670_960.jpg' alt='' /> 
</div> 


$('#dummy').click(function() { 
    $('#video-anchor').html(
     '<iframe src="http://player.vimeo.com/video/57564747" 
      width="500" 
      height="281" 
      frameborder="0" 
      webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
    '); 
});

vimeo에서 사용하는 이미지를 얻을 수 있습니다. 그들은 에 대한 배경 이미지로 설정됩니다.

출처

2013-03-22 12:48:21 Raffael

와우 덕분에 좋은 아이디어. 내가 그것을 시도했을 때 나는 당신에게 돌아갈 것이다! 더미 사진을 어떻게 가져야합니까? 그냥 화면을 인쇄합니까? – maxmitch

http://b.vimeocdn.com/ts/403/127/403127670_960.jpg – Raffael

감사! 당신은 그렇게 않았다 방법? (그것은 또한 짜증나는 vimeo 스탭이 로고를 고를 것입니다.) – maxmitch

다른 방법이 다양 한 동영상의 썸네일 이미지 스크린 샷의 페이지가 가득하게하는 것입니다. 특정 스크린 샷 이미지를 클릭하면 특정 비디오를 표시하는 팝업 창이 활성화됩니다. 이렇게하면로드 시간이 줄어들며 주어진 페이지 내의 많은 동영상에 대해이 작업을 수행 할 수 있습니다.

출처

2013-03-22 12:46:48 blackhawk

이것은 매우 좋은 생각입니다. –

빨리 ...하지만 코드를 제공했습니다. – Raffael

페이지가 완전히로드 될 때까지 객체/비디오 태그를 HTML 밖으로 유지하는 방법은 무엇입니까?

답변

관련 문제