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

Question

背景：我正在为我的Django web应用程序开发一个视频点播功能。我的大多数用户都是在安卓设备上使用网络的用户(如果这很重要的话(。目前，我正在使用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函数来扫描页面上的视频，添加相应的缩略图+播放_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元素本身和manifest-uri传递给一个javascript函数。javascript函数通过更改innerHtml并将id属性从index变量分配给视频标签来初始化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 %}