用jQuery实现播放时出现的错误
Posted 那一刻~~~掩护你
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用jQuery实现播放时出现的错误相关的知识，希望对你有一定的参考价值。
今天，我在项目时，我的朋友让我给她找错误，她说她用jQuery写视频的播放，获取的按钮也对，使用的方法也对，就是播放不了。
她的思路是这样的，在刚开始的视频画面上有个播放按钮，她想点击这个按钮后让视频开始播放：
她的代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 div{ 8 width: 400px; 9 position: relative; 10 } 11 .bo{ 12 width: 50px; 13 height: 50px; 14 text-align: center; 15 line-height: 50px; 16 border-radius: 50%; 17 background: #fbdbd1; 18 position: absolute; 19 left: 38%; 20 top: 30%; 21 } 22 .video{ 23 width: 400px; 24 height: 300px; 25 } 26 </style> 27 </head> 28 <body> 29 <div> 30 31 <video controls="controls" width="350px" height="150px" class="video"> 32 <source src="2.mp4" type=""> 33 </video> 34 <p class="bo">播放</p> 35 </div> 36 37 <script src="ActiveProgect/js/libs/jquery-3.1.1.js"></script> 38 <script> 39 //封面图片 40 $(".video").attr("poster","4.jpg"); 41 // 点击播放 42 $(".bo").click(function(){ 43 $(".video").play(); 44 }) 45 </script> 46 </body> 47 </html>
你们知道她错在哪了么！
问题出在43行，视频的播放方法是paly()没错，重点是她用的是jQuery，play并不是jQuery的函数，而是DOM元素的函数，所以我们需要通过DOM来调用play，更改代码如下：
42 $(".bo").click(function(){ 43 $(".video").get(0).play(); 44 })
以上是关于用jQuery实现播放时出现的错误的主要内容，如果未能解决你的问题，请参考以下文章
使用vue-cli脚手架搭建项目，保存编译时出现的代码检查错误（ESLint）