Javascript 使用JS ES6通过自定义覆盖播放(点击)Witia视频
下面是加价Javascript 使用JS ES6通过自定义覆盖播放(点击)Witia视频,javascript,ecmascript-6,onclicklistener,wistia,Javascript,Ecmascript 6,Onclicklistener,Wistia,下面是加价 <div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"> <div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"> <div id="play-button-overlay-z
<div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">
<div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;">
<div id="play-button-overlay-zwflowymel" class="play-button-overlay d-none d-block">
<img class="custom-wistia-play-button img-fluid " src="/assets/img/VSL-2019-Thumbnail-01.png" width="942" height="530">
</div>
<script src="https://fast.wistia.com/embed/medias/zwflowymel.jsonp" async></script>
<div id="sp-video_zwflowymel" class="wistia_embed wistia_async_zwflowymel videoFoam=true" style="height:100%;position:relative;width:100%">
<div class="wistia_swatch" style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;">
</div>
</div>
</div>
</div>
我在控制台中没有收到任何错误;但视频仍然无法播放
WitiaAPI:似乎只是兜售要使用的jQuery方法。我只想播放视频,它有一个自定义的图像覆盖,点击时,使用vanilla JavaScript Es6,尝试在视频加载后添加事件侦听器。播放方法必须由用户驱动。在您的示例中,一次单击即可加载视频,但由于视频加载的异步性质,播放方法将不会被视为用户交互 Wistia文档中引用的 由于这个限制,您应该避免在setTimeout回调或其他异步函数(如XHR或javascript)中调用play 加载视频可能是一个XHR函数。 试试下面这个例子,让我知道它是否有效
document.addEventListener('DOMContentLoaded', () => {
loadSVGs();
_wq.push({ id: 'zwflowymel', onReady: function (video) {
document.getElementById("play-button-overlay-zwflowymel").addEventListener('click', () => {
video.play();
console.log('pressed Play');
});
}});
});
为了更好地回答这个问题,请显示您的html和css。您的javascript引用id为play按钮覆盖zwflowymel的div。您的代码中有该div吗?它的样式如何?@jimboweb是的;不知道为什么省略了。html标记又回来了。
document.addEventListener('DOMContentLoaded', () => {
loadSVGs();
_wq.push({ id: 'zwflowymel', onReady: function (video) {
document.getElementById("play-button-overlay-zwflowymel").addEventListener('click', () => {
video.play();
console.log('pressed Play');
});
}});
});