通过使用JS显示视频缩略图+播放按钮来优化页面中的多个视频播放器对象

Question

背景： 我正在为我的 Django Web 应用程序开发视频点播功能。我的大多数用户都是在 Android 设备上使用网络的用户（以防万一）。目前，我正在使用 azure 媒体播放器来显示我的视频（通过自适应比特率流）。视频以排序列表的形式提供 - 每页最多显示 10 个视频。模板代码很简单：

{% for vid in object_list %}
<video id="vid{{ forloop.counter }}" class="azuremediaplayer amp-default-skin amp-big-play-centered" controls width="640" height="400" poster="{{ vid.low_res_thumb }}" data-setup='{"logo": { "enabled": false },"language":"ur","nativeControlsForTouch": false}'>
<source src="{{ vid.video_manifest }}" type="application/vnd.ms-sstr+xml" />
</video>
{% endfor %}

像这样直接渲染视频播放器很重。更好的方法是显示视频缩略图，并在其上放置一个播放图标（使其看起来像一个视频播放器），如下所示：

    <div style="width:640px; height:400px;background-image:url({{ vid.low_res_thumb }});background-repeat: no-repeat;background-size: auto 100%;background-position: center;text-align:center;overflow:hidden;">
        <img src="{{ STATIC_URL }}img/play_btn.png" style="display:inline-block;margin-top:20%;">
    </div>

在这种方法中，一旦点击播放按钮，视频缩略图就会被替换为带有autoplay 的 azure 媒体播放器，以便视频立即播放。

问题： 我需要编写一个 JS 函数来扫描页面中的视频，添加相应的缩略图+play_btns 和一个 onclick 事件侦听器，在自动播放模式下将图像替换为实际的 azure 媒体播放器。作为一个 JS 初学者，我正在努力做到这一点并且需要帮助。

会不会是这样的：

<script>
(function() {
    var v = document.getElementsById("vid{{ forloop.counter }}");
    for (var n = 0; n < v.length; n++) {
        var p = document.createElement("div");
        p.innerHTML = showThumb(v[n].dataset.id);
        p.onclick = ???
        v[n].appendChild(p);
    }
})();

function showThumb(id) {
    return '<div style="width:640px; height:400px;background-image:url({{ vid.low_res_thumb }});background-repeat: no-repeat;background-size: auto 100%;background-position: center;text-align:center;overflow:hidden;">
        <img src="{{ STATIC_URL }}img/play_btn.png" style="display:inline-block;margin-top:20%;">
    </div>';
}
</script>

需要帮助来改进这一点。具体来说：（i）我是否正确引用了getElementsById，（ii）我是否正确地制定了p.innerHTML，以及（iii）我如何处理p.onclick？提前致谢！

Answer 1

以下是与任何特定框架无关的示例，但我在问题中使用了您的符号。

请注意，我将 dom 元素本身和清单 uri 传递给 javascript 函数。 javascript 函数通过更改 innerHtml 并将 id 属性从索引变量分配给视频标签来初始化 amp 播放器。当您单击和播放视频元素时，此变量会增加。您可以修改此逻辑以具有一些其他逻辑。

单击带有图像的 div 标记后，我将删除 onclick 处理程序，以允许玩家拦截单击事件。

{% for vid in object_list %}
<div onclick="myFunction(this, {{ vid.video_manifest }})" >
     <img src="{{ STATIC_URL }}" witdh="640" height="400">
</div>
{% endfor %}

<script>
var index = 0;

function myFunction(element, manifestUri){
index++;
element.innerHTML ="<video id=\"azuremediaplayer" + index + "\" class=\"azuremediaplayer amp-default-skin amp-big-play-centered\" tabindex=\"0\"> </video>";
var myOptions = {
            autoplay: true,
            controls: true,
            width: "640",
            height: "400",
            poster: ""
        };
        var myPlayer = amp("azuremediaplayer"+index, myOptions);
        myPlayer.src([{ src: manifestUri , type: "application/vnd.ms-sstr+xml" }, ]);
         element.removeAttribute("onclick");
}        
    </script>

请注意，移动设备不支持自动播放 - 请参阅 https://amp.azure.net/libs/amp/latest/docs/known_issues.htm。 上面的脚本将作为桌面客户端的优化。 您可以检测移动用户并在循环中为每个元素完整呈现视频 html 标签，并为每个视频 dom 元素初始化 azure 媒体播放器，如下所示：

<script>

function myFunction(id, manifestUri){

var myOptions = {
            autoplay: true,
            controls: true,
            width: "640",
            height: "400",
            poster: ""
        };
        var myPlayer = amp("azuremediaplayer"+id, myOptions);
        myPlayer.src([{ src: manifestUri , type: "application/vnd.ms-sstr+xml" }, ]);


}        
    </script>

{% for vid in object_list %}

<script>myfunction('{{ vid.video_id }}','{{ vid.video_manifest }}');</script>

{% endfor %}