Base Video src für Thumbnails

Question

nach viel Graben, konnte ich eine Basis-src für meine iframes setzen, die Notwendigkeit für Basisziel und Base href auf einen Schlag. Ich nehme es nicht an, ich habe nur ein paar existierende Fiedeln verändert, um meinen Bedürfnissen zu entsprechen.

https://jsfiddle.net/1fj3gq9s/2/

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; 
} 

funktioniert gut für Links, aber nicht für den Basispfad für Video- und Bild Thumbnails einstellen. Ich verwende B-Lazy zum Lazy Loading von Videos, die das Attribut data-src verwenden. Ich würde gerne alle meine Links kürzen, indem ich einen Basispfad für die Videos einstelle und hoffentlich nicht b-faul im Prozess deaktiviere.

Dies ist, was offensichtlich nicht

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; 
} 

Seine neue, Web-Entwicklung, die ich häufig funktioniert einfach nicht wissen, wie man die richtigen Fragen zu stellen. Was mache ich falsch? Ist das, was ich versuche, machbar? Gibt es einen Workaround, wenn nicht, der Lazy lädt?

Answer 1

html.

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

jQuery. Best use data Methode, um 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. Stellen Sie sicher, dass Ihre Video-Element Breite und Höhe

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

Hoffe, es hilft