Блог

Главная - Вопросы по программированию - Как очистить все видео при просмотре одного видео и функции кнопки one click

Как очистить все видео при просмотре одного видео и функции кнопки one click

#javascript #html

#javascript #HTML

Вопрос:

У меня есть видео с кнопками для управления воспроизведением. Если кто-то нажмет кнопку воспроизведения, когда видео уже воспроизводится, видео перезапустится с самого начала. Мне нужно отключить кнопку воспроизведения после первого нажатия и повторно включить ее, когда пользователь запрашивает другое видео.

Кроме того, когда пользователь запрашивает другое видео, я хочу, чтобы текущее видео перестало воспроизводиться и было удалено из проигрывателя. В настоящее время, когда кто-то запрашивает другое видео в определенных браузерах (например, IE), аудио из первого видео продолжает воспроизводиться.

Вот мой код на данный момент:

 <html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".buttons").click(function () {
                var divname= this.value;

                if (divname == "Video") {
                    // Add iframe to div#Video
                    $("#Video").append('<h2>YouTube</h2><iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/X3QoZn3lEbk" frameborder="0" allowfullscreen></iframe>');
                } else if (divname == "Close")  {
                    // Clear the iframe
                    $("#Video").empty();
                }
                //Hide/Show
                $("#" divname).show("slow").siblings().hide("slow");
            });

        }); 
    </script>

        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".buttons").click(function () {
                var divname= this.value;

                if (divname == "Video2") {
                    // Add iframe to div#Video2
                    $("#Video2").append('<h2>YouTube</h2><iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/9AZ6jvA9sUw" frameborder="0" allowfullscreen></iframe>');
                } else if (divname == "Close") { 
                    // Clear the iframe
                    $("#Video2").empty();
                }
                //Hide/Show
                $("#" divname).show("slow").siblings().hide("slow");
            });

        }); 

    </script>
    <title></title>
  </head>
  <body>
    <div id="buttonsDiv">
      <input type="button" id="button1" class="buttons" value="Video">
      <input type="button" id="button2" class="buttons" value="Video2">
      <input type="button" id="button#" class="buttons" value="Close">
    </div>
    <div>
      <div id="Video" style="display:none"></div>
      <div id="Video2" style="display:none"></div>
      <div id="Close" style="display:none"></div>
    </div>
  </body>
</html>

o.k Я решил проблему с одним щелчком мыши, и нет необходимости использовать кнопку закрытия, но все еще проблема с повторением iframe.

если кто-то нажмет на первое видео, он не сможет нажать еще раз, если не нажмет на вторую кнопку video и не вернется снова, чтобы нажать на первую, но проблема в повторении и сохранении воспроизведения звука в фоновом режиме

Как заставить clear iframe снова работать в этом коде после того, как я решил проблему one click?

Примечание: очистить iframe сработал, когда я изменил значение close на video и значение video2, но функция очистки всего iframe одним щелчком мыши не работает

новый код 

 <html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#button1').click(function(){
  $('#button2').attr('disabled','');
  $('#button1').attr('disabled','disabled');


                var divname= this.value;

                if (divname == "Video") {
                    // Add iframe to div#Video
                    $("#Video").append( '<h2>YouTube</h2><iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/Jwc43KzUl_k" frameborder="0" allowfullscreen></iframe>' );
                } else if (divname == "Video2") {
                    // Clear the iframe
                    $("#Video").empty();                                        
                }
                //Hide/Show
                $("#" divname).show("slow").siblings().hide("slow");
            });

        }); 
    </script>

        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
$('#button2').click(function(){
  $('#button1').attr('disabled','');
  $('#button2').attr('disabled','disabled');

                 $(this).attr("disabled", "true");
                var divname= this.value;

                if (divname == "Video2") {
                    // Add iframe to div#Video2
                    $("#Video2").append('<h2>YouTube</h2><iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/9AZ6jvA9sUw" frameborder="0" allowfullscreen></iframe>');
                } else if (divname == "Video") {
                    // Clear the iframe
                    $("#Video2").empty();
                }
                //Hide/Show
                $("#" divname).show("slow").siblings().hide("slow");
            });

        }); 

    </script>
    <title></title>
  </head>
  <body>
    <div id="buttonsDiv">
      <input type="button" id="button1" class="buttons" value="Video">
      <input type="button" id="button2" class="buttons" value="Video2">

    </div>
    <div>
      <div id="Video" style="display:none"></div>
      <div id="Video2" style="display:none"></div>
    </div>
  </body>
</html>

чтобы увидеть результат, скопируйте приведенный выше код в html test code для лучшего понимания

Ответ №1:

Действительно ли эти кнопки или ссылки оформлены так, чтобы выглядеть как кнопки? Если это настоящая кнопка, то вы можете отключить ее через my_button.attr('disabled', true) .

В противном случае вам нужно будет придумать какой-нибудь способ сохранения этого состояния самостоятельно. Вы всегда можете использовать метод данных jQuery для сохранения состояния «кнопка» включена / отключена. С другой стороны, если вы обрабатываете это с помощью наличия / отсутствия класса, тогда вы можете позаботиться о затенении кнопки, чтобы пользователи знали, что она отключена.

Другими словами, когда кто-то нажимает play, вы бы добавили класс «disabled» к кнопке play. Затем используйте некоторый CSS, который нацелен на элемент, чтобы придать ему другой цвет, чтобы пользователи знали, что на него не следует нажимать. Затем в функции воспроизведения проверьте, имеет ли кнопка воспроизведения класс disabled, прежде чем что-либо делать.

Что касается видео, продолжающего воспроизводиться в некоторых браузерах, вы всегда можете выбрать ядерный вариант: полностью удалить iframe и поместить на его место новый.

Комментарии:

1. Спасибо за ваш ответ, Майкл, это ссылка, оформленная в виде кнопки (я не уверен, что понимаю вашу точку зрения), но да, я хочу, чтобы кнопка была затенена (не может быть нажата снова, если пользователь не нажмет другую кнопку) извините, что я не профессионал в использовании любого языка веб-программирования, если вы скопируете опубликованный код и протестируете его, вы увидите результат самостоятельно, поэтому, пожалуйста, отредактируйте его для меня. извините за мой английский, но мне нужна ваша помощь, пожалуйста

2. Я редактирую код в вопросе, все еще хочу снова выполнить очистку всего фрейма