用jQuery實現播放時出現的錯誤
阿新 • • 發佈：2017-07-04
畫面 query 今天 absolut htm 元素 play body 我們
今天，我在項目時，我的朋友讓我給她找錯誤，她說她用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實現播放時出現的錯誤