如何使用jquery更改視頻海報？

我正在做一個視頻列表的工作。在那裏，有三個鏈接和三個不同的ID。一旦用戶點擊鏈接，視頻和海報的視頻必須改變。當我使用我的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

海報網址正在改變。但沒有更新是這個問題..！ – 3gwebtrain

請把整個代碼放好。我[試過] [1]運行上面的示例代碼片段（應該可以獨立運行），但它總是崩潰在'... var change = nowSrc.replace ...'。 [1]：http://jsfiddle.net/FNxZA/2/ – g19fanatic

我不認爲你可以直接使用該名訪問屬性。

我所referrering到是你$('video')標籤，通過我的經驗，應該在頁面上返回的所有標記的數組，如果可以的話，你應該ID匹配它來代替。

如果這不是可能性，並且您確信網頁上只有一個視頻標籤，您可以執行類似$('video')[0]的操作，但這不是一個好的解決方案。

你可以發佈你的整個代碼，包括<div class="video-box-area">？

來源

2011-11-07 23:15:12 Ole

據HTML5 video specs，海報顯示時沒有視頻數據可用（視頻的readyState的屬性爲HAVE_NOTHING，或HAVE_METADATA但沒有視頻數據尚未在所有獲得，或元素的readyState的屬性任何後續值，但媒體資源沒有視頻頻道）。當視頻暫停時，並且當前播放位置是視頻的第一幀時，該元素表示與當前播放位置對應的視頻幀或張貼框，取決於瀏覽器。

在您的情況下，視頻數據可能是可用的，所以海報不會呈現。如果你給我一個現場演示，我可以幫你調查問題。

來源

2011-11-08 03:59:37 ExpExc

如何使用jquery更改視頻海報？

回答

相關問題