Динамически меняйте несколько источников видео с помощью jQuery

Question

Я полный нуб, поэтому, пожалуйста, успокойся.

Я пытаюсь создать веб-страницу с видеопроигрывателем и списком видео справа от плеера, который будет выступать в качестве плейлиста. В интересах совместимости с несколькими браузерами я использую HTML-видео для всех.

<video controls width="640" height="360"> 
    <source id='mp4src' src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4"> 
    <source id='webmsrc' src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm"> 
    <object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360"> 
     <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"> 
     <param name="allowFullScreen" value="true"> 
     <param name="wmode" value="transparent"> 
     <param name="flashVars" value="config={'playlist':['http%3A%2F%2Fsandbox.thewikies.com%2Fvfe-generator%2Fimages%2Fbig-buck-bunny_poster.jpg',{'url':'http%3A%2F%2Fclips.vorwaerts-gmbh.de%2Fbig_buck_bunny.mp4','autoPlay':false}]}"> 
    <img alt="Big Buck Bunny" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360" title="No video playback capabilities, please download the video below"> 
</object> 

Когда пользователь нажимает на элементе списка, я хочу видео, связанное с этим элементом списка для воспроизведения в проигрывателе видео. Для этого я построил список HTML и дал каждому элементу списка 2 псевдо-атрибуты (это те, что даже есть?), Которые называются url1 и url2, которые содержат URL-адреса этого видео, один в mp4 и один в формате WebM.

<ul id='playlist'> 
    <li class='plvid' id='vid1' url1='homilies/kursk1_30_11.mp4' url2='homilies/kursk1_30_11.webm'> 
     <h5>Vid1</h5> <span class='descrip'>describevid1</span> <br> 
     <span class='runtime'>eternity or 1 hr.</span> 
    </li> 
    <li class='plvid' id='vid2' url1='homilies/video.mp4' url2='homilies/video.webm' 
     <h5>Vid2</h5> <span class='descrip'>describevid2</span> <br> 
     <span class='runtime'>eternity or 1 hr.</span> 
    </li> 
</ul> 

Я тогда написал некоторые JQuery, которые должны, по идее, сделать следующее:

1. Обратите внимание, когда кто-то нажимает на элемент списка, а затем начать делать все эти вещи:
2. Получить значения псевдоатрибутов url1 и url2 и хранить их как переменные jQuery
3. Удалить 2 исходных элемента, которые в настоящее время находятся внутри видеоэлементов
4. Замените эти исходные элементы на 2 новых h TML строка, имеющая переменные интерполируются значение атрибутов ЦСИ

5. Загрузите видео

   $(document).ready(function(){ 
       $('#playlist li').click(function(){ 
        var url1 = $(this).attr('url1'); 
        var url2 = $(this).attr('url2'); 
        $('.content video #mp4src').remove(); 
        $('.content video #webmsrc').remove(); 
        $('.content video').html(
         "" 
        ); 
        $('.content video').html(
         "" 
        ); 
        $('.content video')[0].load(); 
       }); 
   });

(примечание стороны: Обратите внимание, как нет HTML строки в любом методе HTML? На самом деле есть! Но, по-видимому, я даже лучше разбираюсь в коде, чем я думал, потому что они не будут отображаться здесь в stackoverflow независимо от того, что я делаю, блок кода будет проклят. Если кто-то может понять, как это исправить ...?)

И, конечно же, ничего не работает. Насколько я могу судить, исходные элементы даже не удаляются при щелчке элемента списка, а это означает, что JQuery CDN, размещенный в Google, был нарушен (hah!) Или что я делаю что-то очень глупо и явно неправильно. Я даже не уверен, что это правильный способ настроить плейлист. Таким образом, любой совет, брошенный мне, был бы очень оценен, особенно если он включает минимальный ванильный JS (главным образом потому, что я не знаю JS), и совет осторожно бросается. Пояснения о том, что я делаю неправильно, также будут приятными. Заранее спасибо!

Answer 1

Хорошо, прежде всего я хотел бы поблагодарить всех за их помощь. Мне понадобилось бы хотя бы неделю, чтобы решить эту дилемму без вас, ребята.

О, подождите.

В любом случае, для некоторого бедного сока, который издевается над этим вопросом через 50 лет, я исправил проблему, поставив https: перед моим запросом CDN jQuery. По какой-то причине это действительно имеет значение.