Question

我在页面上有4个按钮。每个按钮都有4条视频路径，但是video标签会继续播放我为所有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();
}

无法删除视频源属性

1 个答案: