2017-02-16 17 views
0

после многократного копания я смог установить базовый src для своих фреймов, исключив необходимость базовой цели и базового href одним махом. не принимая на это ответственность, я просто изменил некоторые существующие скрипты в соответствии с моими потребностями.базовое видео src для эскизов

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

отлично работает для ссылок, но не для установки базового пути для видео и графических эскизов. Я использую b-lazy для ленивых загружающих видеороликов, в которых используется атрибут 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; 
} 

Будучи новым для веб-разработки, я часто просто не знают, как задавать правильные вопросы. Что я делаю не так? Это то, что я пытаюсь сделать возможным? Есть ли обходной путь, если нет, что позволит ленивую загрузку?

ответ

0

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

Надеется, что это помогает

+0

благодаря Хокусай. к сожалению, это не сработало https://jsfiddle.net/musghb43/ –

+0

Отредактировано, попробуйте добавить тег источника jquery – Hokusai