如何基于JSON数据填充列表href 实现点击切换播放对应视频

你当前的代码存在两处核心问题导致点击切换功能失效：

1. 动态生成的.choose元素无法直接绑定点击事件：绑定事件时ajax请求还没返回，列表元素还没渲染到DOM上，绑定的事件不生效，需要用事件委托绑定到已经存在的父级元素上。
2. 拼接列表项时href属性赋值错误：你直接把el对象赋值给了href，应该取el里存储的视频路径字段。

前提说明 #

假设你的files/assets/media.json结构如下（如果实际字段名不同，对应替换即可）：

{
  "video": [
    {"title": "视频1名称", "src": "files/assets/video/视频1路径.mp4"},
    {"title": "视频2名称", "src": "files/assets/video/视频2路径.mp4"},
    {"title": "视频3名称", "src": "files/assets/video/视频3路径.mp4"}
  ]
}

修正后的完整代码 #

<section class="container">
    <div class="card col-sm-6">
        <div class="card-body container">
            <h5 class="card-title">Video</h5>
            <p class="card-text">Seleziona un video in elenco per visualizzarlo</p>
            <div class="row">
                <div class="col-sm-6">
                    <ul id="listvideo" class="list-group list-group-flush border rounded">
                    </ul>
                </div>
                
                <div class="col-sm-6">
                    <video id="myVideo" src="files/assets/video/by_night.mp4" width="220"></video>
                    <button id="play" onclick="play()">Play</button>
                    <button id="stop" onclick="stop()">Stop</button>
                  <!--  <span id="duration"></span> -->
                </div>
            </div>
        </div>
      </div>
</section>

<script>
var myVideo = document.getElementById("myVideo");

function play() {
  myVideo.play();
}
function stop(){
  myVideo.pause();
  myVideo.currentTime = 0; // 可选配置：点击停止后回到视频开头
}

$(document).ready(function() {
    $.ajax({
        url: 'files/assets/media.json',
        method: 'GET',
        dataType: "json",
        success:function(data){
            $.each(data.video,function(i,el){
                var titolo = el.title;
                // 把视频路径存入href属性
                $('#listvideo').append('<li class="list-group-item"><a class="choose" href="'+el.src+'">'+titolo+'</a></li>');
            });
        }
    });   
    // 用事件委托绑定点击事件，适配动态生成的元素
    $('#listvideo').on('click', '.choose', function(e){
        e.preventDefault();
        var newVideoSrc = $(this).attr('href');
        // 更换播放器视频源
        myVideo.src = newVideoSrc;
        // 可选配置：切换后自动播放，不需要可以删除下一行
        myVideo.play();
    });       
});
</script>

内容的提问来源于stack exchange，提问作者Claudio