基本視頻src的縮略圖

經過大量的挖掘，我能夠爲我的iframe設置一個基本的src，無需基礎目標和基礎href一舉。沒有爲此付出代價，我只是改變了一些現有的小提琴以適應我的需要。基本視頻src的縮略圖

HTML 

<iframe frameborder="0" width="700" height="430"></iframe> 
<br><br> 
<div class="vidlist"> 
    <a vid="8PdR1_pVNBE">Supernatural Season 1 Episode 1</a> 
    <a vid="lHB2OuQ1AqY">Supernatural Season 1 Episode 2</a> 
</div> 

jQuery 

$('.vidlist a').click(function() { 
    $('iframe').attr('src', 'https://openload.co/embed/' + $(this).attr('vid')); 
    return false; 
}); 

CSS 

.vidlist a { 
    cursor: pointer; 
    color: blue; 
    border: 2px solid blue; 
    padding: 3px; 
    margin: 15px; 
    border-radius: 5px; 
}

的偉大工程的鏈接，但不能用於設置視頻和圖像縮略圖的基本路徑。我使用懶惰加載視頻的懶惰，它使用data-src屬性。我想通過爲視頻設置基本路徑來縮短我的所有鏈接，希望不會在此過程中禁用b-lazy。

這是顯然行不通

HTML 

<div class="vidlist"> 
    <video data-src="movie.ogg"></video> 
</div> 

jQuery 

$(document).ready(function() { 
    $('.vidlist video').attr('src', 'http://www.w3schools.com/html/' + $(this).attr('data-src')); 
}); 

CSS 

.vidlist video { 
    width: 320px; 
    height: 180px; 
    border: 1px solid black; 
}

作爲新的Web開發，我經常只是不知道如何提出正確的問題。我究竟做錯了什麼？我想要做什麼是可行的？是否有解決方法，如果沒有，這將允許延遲加載？

來源

2017-02-16 Cameron Vine

Html。

<div class="vidlist"> 
    <video data-src="movie.ogg"> 
    </video> 
</div>

jQuery。最好使用data方法來獲得data-src

$(document).ready(function() { 
    var targetSrc = 'http://www.w3schools.com/html/' + $('.vidlist video').data('src'); 
    $('.vidlist video').append('<source src="' + targetSrc + '" type="video/ogg">'); 
    $('.vidlist video')[0].play(); //Access to js api video object 
});

CSS。確保您的視頻元素具有高度和寬度

video { 
    width: 400px; 
    height: 300px; 
}

希望它可以幫助

來源

2017-02-16 09:25:41 Hokusai

感謝北齋。不幸的是，它沒有工作https://jsfiddle.net/musghb43/ –

編輯，嘗試通過jquery添加源標記 – Hokusai

基本視頻src的縮略圖

回答

相關問題