Не удалось удалить атрибут источника видео

Question

У меня 4 кнопки на странице. Каждая кнопка имеет 4 пути видео, но тег видео продолжает воспроизводить первый путь, который я дал ему для всех 4 кнопок. Вот как я пытался ее решить:

  function PlayRecordedWordSoundFile(x)
        {
            debugger;

            var video = document.getElementById('vidplayer');
            var sel=x;
            video.pause();
            video.removeAttribute('src'); // empty source
            video.load();
                var source=document.createElement('source');   
                source.setAttribute('src',"/x/"+sel);
                video.appendChild(source);
                video.play();


        }

<button type="button" id="Listen" title="Listen" class="normal-but btnlistenB" value="Listen" data-id='<%# Eval("videoFilePath") %>'>Listen</button>
<video  id="vidplayer"></video>

   $(document).on('click','.btnlistenB',function(){
            PlayRecordedWordSoundFile($(this).attr('data-id'));
            return false;
        });

Каждая кнопка должна воспроизводить свой собственный путь. Я показал только одну кнопку демо, так как все они идентичны. Кто-нибудь может сказать мне, что я делаю здесь неправильно?

Answer 1

Сначала убедитесь, что вы не используете один и тот же id для всех кнопок.Кроме того, поскольку вы еще не добавили прослушиватель при нажатии кнопки, я просто использую прослушиватель onclick для кнопки здесь.
Проверьте эту работающую codepen здесь.

<video id="vidplayer" width="670" height="377" autoplay="true" controls="controls">
    <source id="vidsrc" 
        src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" 
        type='video/mp4'>
</video>

<button type="button" id="Listen" title="Listen" class="normal-but btnlistenB" 
  data-id='http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4' 
  onclick="PlayRecordedWordSoundFile(this.getAttribute('data-id'));">
       Listen
</button>

А потом,

function PlayRecordedWordSoundFile(x) {
    var video = document.getElementById("vidplayer");
    var source = document.getElementById("vidsrc");
    var sel = x;
    video.pause();
    source.removeAttribute("src"); // empty source
    video.load();   
    source.setAttribute("src", "" + sel);   
    video.play();
}