javascript - HTML5 视频:未捕获的类型错误:无法读取未定义的属性“播放”
问题描述
我有一个简单的侧边栏,其中有一个视频列表。现在我想添加自定义播放按钮,以便用户可以播放他选择的视频。它看起来像这样。
这是html代码:
<div class="sidebar navbar-nav" id="canvas" tabindex="1" style="overflow: hidden; outline: none;">
<div id="51" class="sidebar_movie-block ui-draggable" style="position: relative;">
<h1 class="title" for="video_51">Ecommerce</h1><span class="block-edit fa fa-edit" for="video_51"></span>
<div class="playpause" for="video_51"></div>
<video id="video_51" movieid="51" class="video-list video" src="videos/mena.mp4" duration="14.984" frames="375"></video>
</div>
<div id="10" class="sidebar_movie-block ui-draggable" style="position: relative;">
<h1 class="title" for="video_10">Travel</h1><span class="block-edit fa fa-edit" for="video_10"></span>
<div class="playpause" for="video_10"></div>
<video id="video_10" movieid="10" class="video-list video" src="videos/whats_your.mp4" duration="3.344" frames="84"></video>
</div>
<div id="12" class="sidebar_movie-block ui-draggable" style="position: relative;">
<h1 class="title" for="video_12">CRM</h1><span class="block-edit fa fa-edit" for="video_12"></span>
<div class="playpause" for="video_12"></div>
<video id="video_12" movieid="12" class="video-list video" src="videos/and_in.mp4" duration="5.104" frames="128"></video>
</div>
</div>
下面是播放视频的js代码:
var myVideo = $(".sidebar_movie-block").find("video").attr('id');
console.log(myVideo);
// $("#" + myVideo).play();
$(".playpause").on('click', function(){
$(myVideo).get[0].play();
})
不幸的是,我收到以下错误!
未捕获的类型错误:无法读取未定义的属性“播放”
我的代码有什么问题?
解决方案
如果您要做的只是在单击旁边的按钮时播放视频,那么您所要做的就是通过获取父 div 并找到视频元素来获取对视频元素的引用。尝试这个:
$(".playpause").on('click', function(){
$(this).closest('.sidebar_movie-block').find('video').get(0).play();
});
推荐阅读
- sling - 如何在 Composum 平台上公开网站
- c++ - Poco 的 Path current() 没有返回 C++ 中的当前工作目录
- quarkus - 如何发布基于表单的身份验证
- java - 我如何在 android 中具有 xy 位置的图像上制作可移动的 perticuler 点?
- java - 在方法中初始化局部变量
- spring-boot - Openshift 容器运行状况探测连接被拒绝
- ubuntu - 通过SSH,Ubuntu 20.04(Focal)“无法获得引用控制台的文件描述符”
- python - 从数据框 pandas 创建 groupby 函数
- three.js - 我无法使用 WebGL1 或 2 在我的着色器中使用导数 (dFdx)
- django - 使用 nginx + gunicorn + django 的间歇性错误请求 (400) Spotify API 回调