使用jQuery控制HTML5视频

Controling HTML5 video with jQuery

本文关键字：视频 HTML5 控制 jQuery 使用      更新时间：2023-09-26

我正试图使用jQuery为本地托管的html5视频创建控制按钮。然而，我似乎无法让按钮工作。我尝试过不同的编码方法，但似乎有效。

$(function(){
    var video = $('#video').get(0);
    $(document).delegate('#play-button', 'click', function() {
        video.load();
        video.play();
        $('#play-button').addClass('hide');
    });
    $(document).delegate('#pause', 'click', function() {
        if (video.play() === true) {
            video.pause();
        } else {
            $('#pause > img').attr('src', 'image/play.png');
            video.play();
        }
    });
    $(document).delegate('#stop', 'click', function() {
        video.stop();
        video.currentTime = 0;
    });
});

<div id="video-controls">
    <button type="button" role="button" id="play-button"><img src="<?php echo get_template_directory_uri () ?>/images/play.png" alt="play"></button>
    <button type="button" role="button" id="pause"><img src="<?php echo get_template_directory_uri () ?>/images/pause.png" alt="pause"></button>
    <button type="button" role="button" id="stop"><img src="<?php echo get_template_directory_uri () ?>/images/stop.png" alt="stop"></button>
</div>

我想做的是在视频中间显示一个播放按钮，点击后会播放视频，但随后会隐藏起来。因此，要暂停和停止视频，用户需要将鼠标悬停在视频上，控件就会出现。

如有任何建议，我们将不胜感激。谢谢你花时间研究我的问题。

如前所述，您的代码有一些错误。

我修复了它们，现在你可以在这里看到一个正在工作的jsfiddle

Javascript

    var video = $('video').get(0);
$('video, #video-controls').mouseenter(function(){
    if($('#video-controls').css('display') === 'none')
        $('#video-controls').show(); 
});
$('video, #video-controls').mouseleave(function(){ 
    if($('#video-controls').css('display') !== 'none')
        $('#video-controls').hide(); 
});
$(document).ready(function() { 
    var top = (($('video').position().top + $('video').height()) / 2) - $('#video-controls').height() / 2 ;
  var left = (($('video').position().left + $('video').width()) / 2) - $('#video-controls').width() / 2;
    $('#video-controls').css({top: top, left: left, position:'fixed'}); 
});
    $(document).delegate('#play-button', 'click', function() {
        video.load();
        video.play();
        $('#play-button').addClass('hide');
    });
    $(document).delegate('#pause', 'click', function() {
        if (video.paused !== true && video.ended !== true) {
            video.pause();
        } else {
            $('#pause > img').attr('src', 'image/play.png');
            video.play();
        }
    });
    $(document).delegate('#stop', 'click', function() {
        video.pause();
        video.currentTime = 0;
    });

HTML

<div id="video-controls" class="ctrls">
    <button type="button" role="button" id="play-button"><img src="<?php echo get_template_directory_uri () ?>/images/play.png" alt="play"></button>
    <button type="button" role="button" id="pause"><img src="<?php echo get_template_directory_uri () ?>/images/pause.png" alt="pause"></button>
    <button type="button" role="button" id="stop"><img src="<?php echo get_template_directory_uri () ?>/images/stop.png" alt="stop"></button>
</div>
<video width="400" controls>
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
<p>
Video courtesy of
<a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
</p>

CSS

video{ z-index:0;}
.ctrls{ z-index:1; display: none;}
相关文章：