jQuery实现HTML5视频播放暂停按钮失效 求问题排查及可行代码

问题根源 #

你把jQuery库引入和自定义脚本写在了同一个<script>标签里——带src属性的<script>标签无法执行内部的JavaScript代码，这是导致点击无反应的核心原因。

修正后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <!-- 单独引入jQuery库 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <!-- 单独编写自定义脚本逻辑 -->
    <script>
        $(document).ready(function() {
            // 播放按钮点击事件
            $('#play').click(function(){
                $('#myvid').get(0).play();
            });
            // 暂停按钮点击事件
            $('#pause').click(function(){
                $('#myvid').get(0).pause();
            });
        });
    </script>
    <title>Drive</title>
</head>
<body>
   
    <video id="myvid" width="800" height="600">
        <source src="video.mp4" type="video/mp4">
        <track  src="leg.vtt" kind="captions" srclang="en-us" label="english" default>
    </video>

    <br>
    <br>

    <input type="button" value="Play" id="play" />
    <input type="button" value="Pause" id="pause" />
    
</body>
</html>

可选优化：单个按钮切换播放/暂停 #

如果想简化成单个按钮切换状态，可替换脚本和按钮代码：

脚本部分 #

$(document).ready(function() {
    $('#toggle').click(function(){
        const video = $('#myvid').get(0);
        if(video.paused){
            video.play();
            $(this).val('Pause');
        } else {
            video.pause();
            $(this).val('Play');
        }
    });
});

按钮部分 #

<input type="button" value="Play" id="toggle" />

内容的提问来源于stack exchange，提问作者Diogo Machado