ruby-on-rails - 如何在 vuejs 中绑定 Wistia 视频播放/结束事件
问题描述
我正在使用 Wistia 脚本将视频嵌入到我的 vuejs 页面中,使用他们的后备脚本成功嵌入了视频,如下所示:
<div class="wistia_responsive_padding" style="padding:55.94% 0 0 0;position:relative;">
<div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;">
<iframe :src="defaultWistiaVideo" title="Welcome Video" allow="autoplay; fullscreen" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen msallowfullscreen width="100%" height="100%"></iframe>
</div>
</div>
现在我想听play
和end
事件将用户的观看状态更改为正在观看/观看。我正在像他们的指南一样添加下面的两个脚本,但它不起作用。
请注意,如果我将它们放入单独的 html 文件而不是 vuejs 组件中,这些脚本将起作用
我不确定如何使用 vuejs 正确设置这些事件。
<div id="wistia_abcde12345" class="wistia_embed" style="width:640px;height:360px;"> </div>
<script src="//fast.wistia.com/assets/external/E-v1.js"></script>
<script>
wistiaEmbed = Wistia.embed("abcde12345");
wistiaEmbed.hasData(function() {
wistiaEmbed.bind("play", function() {
console.log("video played", wistiaEmbed.name());
});
});
</script>
<script src="//fast.wistia.com/assets/external/E-v1.js" async></script>
<div class="wistia_embed wistia_async_abcde12345" style="width:640px;height:360px;"></div>
<script>
window._wq = window._wq || [];
_wq.push({ id: "abcde12345", onReady: function(video) {
video.bind("play", function() {
console.log("video played", video.name());
});
}});
</script>
解决方案
您应该将 wistia 事件监听脚本放在mounted
函数上,如下所示:
mounted() {
window._wq = window._wq || [];
let context = this;
_wq.push({ id: '_all', onReady: function(video) {
video.bind('play', function() {
// event handler
});
video.bind('end', function() {
// event handler
});
}});
}
推荐阅读
- sql - 我的查询需要性能改进,有什么建议吗?
- mysql - MySQL - 如何修改复杂的内部连接和连接查询?
- wsdl - 如何使 MuleSoft webconsumer 连接器字段获取动态值
- python - 带有 eventlet 的 Flask-SocketIO:Web 和 Websockets 线程
- python - Groupby 并根据 Pandas 中的另一列对一列进行降序排列
- auth0 - 赛普拉斯无法使用新的 auth0-spa-js 包请求 API 或显示内容
- macros - 如何在 sbcl common lisp 的 let 绑定中定义(defmacro)宏?
- c - 如何在没有 GPU 的情况下在 Arm 上加速 Gtk2+ 的 Cairo 绘画速度
- windows - 如何在 .bat 文件的“for”命令中格式化 Tesseract-OCR 语言设置
- java - 如何通过摆脱冗余来优化下面的代码?