用jQuery實現播放時出現的錯誤

時間 2019-11-20

原文原文鏈接

　　　今天，我在項目時，個人朋友讓我給她找錯誤，她說她用jQuery寫視頻的播放，獲取的按鈕也對，使用的方法也對，就是播放不了。html

　　　　她的思路是這樣的，在剛開始的視頻畫面上有個播放按鈕，她想點擊這個按鈕後讓視頻開始播放：jquery

她的代碼以下：ide

 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，更改代碼以下：post

42     $(".bo").click(function(){
43         $(".video").get(0).play();
44     })

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。