jquery를 사용하여 비디오 포스터를 변경하려면 어떻게해야합니까?

나는 비디오 작업을하고있다. 거기에는 3 개의 다른 ID가있는 3 개의 링크가 있습니다. 사용자가 링크를 클릭하면 비디오 및 비디오의 포스터가 변경되어야합니다. jquery 코드를 사용하는 동안 비디오가 변경되지만 attr "포스터"는 전혀 변경되지 않습니다 ... 어떤 이유입니까? 이것은 내가 사용하고 무엇을 내 코드 ...jquery를 사용하여 비디오 포스터를 변경하려면 어떻게해야합니까?

비디오 HTML 코드입니다 :

<video width="600" height="360" id="player2" poster="videos/video1/video1.jpg" controls="controls" preload="none"> 
    <!-- MP4 source must come first for iOS --> 
    <source type="video/mp4" src="videos/video1/video1.mp4" /> 
    <!-- WebM for Firefox 4 and Opera --> 
    <source type="video/webm" src="videos/video1/video1.webm" /> 
    <!-- OGG for Firefox 3 --> 
    <source type="video/ogg" src="videos/video1/video1.ogv" /> 
    <!-- Fallback flash player for no-HTML5 browsers with JavaScript turned off --> 
    <object width="640" height="360" type="application/x-shockwave-flash" data="videos/flashmediaelement.swf"> 
     <param name="movie" value="videos/flashmediaelement.swf" /> 
     <param name="flashvars" value="controls=true&amp;file=videos/video1/video1.mp4" /> 
     <!-- Image fall back for non-HTML5 browser with JavaScript turned off and no Flash player installed --> 
     <img src="videos/video1/video1.jpg" width="640" height="360" alt="Here we are" 
      title="No video playback capabilities" /> 
    </object> 
</video>

내 jQuery 코드 :

$('div.video-box-area img').click(function(){ 
    var nowSrc = $('video').attr('src'); 
    var change = nowSrc.replace(nowSrc.substr(12,1),$(this).parent().attr('id').substr(length-1)); 

    var poster = $('video').attr("poster"); 
    var posterChange = poster.replace(poster.substr(12,1),$(this).parent().attr('id').substr(length-1)); 

    $('video').attr("poster",posterChange); 
    $('video').attr('src',change); 

    return false; 
});

출처

2011-10-28 3gwebtrain

아직 대답이 없지만 두 계산에서 인라인 인 $ (this) .parent(). attr ('id')를 포함하여 계산 전에 모든 속성 읽기를 그룹화합니다. 현재 두 계산 모두 jQuery가 DOM을 따라 가면 속도가 느려집니다. ID를 한 번 읽고 필요에 따라 사용하십시오. 또한 전체 마크 업을 제공하지 않았기 때문에이를 디버깅하는 것이 불가능합니다. 우리는 $ (this) .parent(). attr ('id')가 어떻게 생겼는지 추측하고 있습니다. 이렇게하면 replace-substring 문을 디버깅하기가 어렵습니다. – BenSwayne

가 난 그냥 few things을 시도하고 당신의 JQuery와 통화처럼 보이는 괜찮아. 내가 볼 수있는 유일한 것은 posterChange 변수가 실제로 posterValue == '' 인 경우입니다. 캐릭터 라인이 하늘의 경우, attr는 변경되지 않습니다.

당신이 posterChange 변수를 계산하고이 비어 있는지 확인 후 경고 권리를 수행

...

출처

2011-11-01 12:37:57 g19fanatic

포스터 URL이 변경됩니다. 하지만 아무것도 문제가 업데이 트됩니다 ..! – 3gwebtrain

전체 코드를 입력하십시오. 위의 예제를 실행 ([독립 실행 형)이 가능해야 함]했으나 항상 '... var change = nowSrc.replace ...'에서 충돌합니다. [1] : http://jsfiddle.net/FNxZA/2/ – g19fanatic

나는 당신이 태그 이름을 사용하여 직접 속성에 액세스 할 수 있습니다 같아요. 난 당신이, 당신이 대신 ID하여 일치해야 할 경우, 페이지의 모든 태그의 배열을 돌려줍니다 내 경험에 의해, 당신의 $('video') 태그입니다하기 referrering하고 무엇

그럴 가능성은없고 페이지에 비디오 태그가 하나만 있다고 확신하는 경우 $('video')[0]과 같은 작업을 수행 할 수 있지만 좋은 해결책은 아닙니다.

<div class="video-box-area">을 포함하여 전체 코드를 게시 할 수 있습니까? 에는 비디오 데이터가를 사용할 수없는 경우 HTML5 video specs에 따르면

출처

2011-11-07 23:15:12 Ole

, 포스터가 표시됩니다 (비디오의 readyState의 속성은 HAVE_NOTHING, 또는 HAVE_METADATA하지만 비디오 데이터가 아직 전혀 얻을 수없는, 또는 요소의 readyState의 속성이되었습니다 중 하나입니다 후속 값은 있지만 미디어 리소스에는 비디오 채널이 없음). 비디오가 일시 정지되고 현재 재생 위치가 비디오의 첫 번째 프레임 인 경우, 요소는 현재 재생 위치 또는 포스터 프레임에 해당하는 비디오 프레임을 나타내며 브라우저에 따라 다릅니다.

경우에 따라 비디오 데이터를 사용할 수 있으므로 포스터가 렌더링되지 않습니다. 나에게 라이브 데모를 주면 문제를 조사 할 수 있도록 도와 줄 수 있습니다.

출처

2011-11-08 03:59:37 ExpExc

jquery를 사용하여 비디오 포스터를 변경하려면 어떻게해야합니까?

답변

관련 문제