如何使用 jQuery 處理 HTML5 媒體事件?


要使用 jQuery 處理 HTML5 媒體事件,可以使用 click() 方法。

示例

你可以嘗試執行下面的程式碼來學習如何處理 HTML5 媒體事件,例如播放歌曲

線上演示

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    var x = $(".myPlayer").length; // Count total audio players
    var z = 0; // Start at first audio player

    $("#play-bt").click(function(){
       $(".myPlayer")[z].play();
       $(".message").text("Music started");
    })
    $("#stop-bt").click(function(){
       $(".myPlayer")[z].pause();
       $(".myPlayer")[z].currentTime = 0;
       $(".message").text("Music Stopped");
    })

});  
</script>
</head>
<body>

<audio class ="myPlayer" name="" src="/html/Kalimba.mp3" ></audio>

<div class ="message"></div>

<a id="play-bt" href="#">Play music</a><br>
<a id="stop-bt" href="#">Stop music</a><br>

</body>
</html>

更新於: 11-Dec-2019

364 次觀看

開啟你的 職業生涯

完成課程獲得認證

開始
廣告