Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.12.2017, 00:24
Новичок на форуме
Отправить личное сообщение для Cheshirka Посмотреть профиль Найти все сообщения от Cheshirka
 
Регистрация: 27.11.2017
Сообщений: 4

Пуск/пауза видео в youtube
Создала отдельную кнопку для управлением видео. При нажатии кнопки видео должно останавливаться и меняться значок на кнопке, при повторном нажатии продолжение видео с того же момента и снова смена значка. В моем варианте работает только 1 часть. Подскажите пожалуйста, что нужно исправить, чтобы корректно заработало.
Код:
<?php
    /*
    Template Name: Пример страниц
    */
?>

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>PRF</title>

    <!-- Bootstrap -->
    <link href="<?php bloginfo('template_url'); ?>/css/bootstrap.min.css" rel="stylesheet">
		<!-- <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/owl.carousel.css"> -->
    <link href="<?php bloginfo('template_url'); ?>/style.css" rel="stylesheet">
    <link href="<?php bloginfo('template_url'); ?>/responsive.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

<body class="page-video">
<section class="content-my">
  <div class=" container-video-my">

<div class="row">

       <div class="col-md-2  logo-my">
         <a href="<?php echo home_url( '/' ); ?>"><img class="logo" src="<?php bloginfo('template_url'); ?>/images/logo.png" alt="" /></a>
 </div>

 <div class="col-md-7">
<div class="video-block">
<div class="video-text video-text-my">
<h1>Получить банковскую гарантию </h1>
<span>за 48 часов <br>по всей России</span>
</div>
	<div id="play">
<!-- 560 315 / 854 480-->
 <iframe width="500" height="426" id="Video5" class="background-video-my" 
	 src="https://www.youtube.com/embed/JHz3pPoHDl4?rel=0&amp;showinfo=0&amp;controls=2&amp;start=2&amp;autoplay=1&amp;modestbranding=1&amp;enablejsapi=1" frameborder="0" allowfullscreen></iframe>
	</div>
</div>
</div>

<div class="col-md-3">
<div class="form-top-my form-top" id="form-top">
  <span class="form-top-title">Заявка на получение банковской гарантии</span>
 <?php if (have_posts()) : ?>
 
<?php while (have_posts()) : the_post(); ?>


 <?php echo do_shortcode( '[contact-form-7 id="38" title="Заявка"]' ); ?>
 <?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
<i class="svg-icon"></i>
</div>
</div>
</div>
</div>
</section>
<footer class="my-footer">

  <div class="footer-top">
    <div class="container">

  <div class="row">


   <div class="col-md-12">
     <ul class="footer-list-1">


     <li>

<span class="title-zn"><?php the_field('заголовок_номера_подвал', option); ?></span>
<span class="phone-zn"><?php the_field('номер_телефона_подвал', option); ?></span>
     </li>
     <li>

<!-- <a href="#" class="zak-zn">Заказать звонок на Ваш номер</a> -->
<a href="#contact_form_pop" class="zak-zn fancybox">Заказать звонок на Ваш номер</a>
<div style="display:none" class="fancybox-hidden">
 <div id="contact_form_pop">               
<?php echo do_shortcode( '[contact-form-7 id="208" title="Заказ звонка"]' ); ?>
                          
</div>
</div>

     </li>
     <li>
<?php the_field('почта_подвал', option); ?>

     </li>
     <li>

<a href="<?php echo get_permalink(31); ?>#contacts" class="footer-adress"><?php the_field('адрес_подвал', option); ?></a>
     </li>
                    </ul>
</div>
</div>
</div>

<hr />
<div class="container">

<div class="row">


<div class="col-md-12 text-center">
<?php wp_nav_menu( array( 'theme_location' => 'primary1','fallback_cb'=> '', 'items_wrap'      => '<ul class="footer-list-2">%3$s</ul>', 'container'       => '') ); ?>
 


 

</div>
</div>
</div>



<hr />
<div class="container">

<div class="row">


<div class="col-md-12 text-center">
 <ul class="footer-list-3">
<?php  while(has_sub_field('соц_сети', option)) { ?>

 <li><a href="<?php the_sub_field('ссыдка'); ?>"><img src="<?php the_sub_field('иконка'); ?>" alt="" /></a></li>
<?php } ?>
                </ul>

</div>
</div>
</div>


</div>
<div class="footer-bottom">
  <div class="container">

  <div class="row">


  <div class="col-md-12 text-center">
<?php the_field('копирайты', option); ?>
</div>
</div>
</div>
</div>
</footer>



    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="<?php bloginfo('template_url'); ?>/js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="<?php bloginfo('template_url'); ?>/js/bootstrap.min.js"></script>
    <script src="<?php bloginfo('template_url'); ?>/js/jquery.matchHeight.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_url'); ?>/js/jquery.maskedinput.min.js"></script>
     	<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/owl.carousel.js"></script>
        <script src="<?php bloginfo('template_url'); ?>/js/script.js"></script>

	<script src="//www.youtube.com/player_api"></script>
    <script type="text/javascript">
		function onYouTubePlayerAPIReady() {
        player = new YT.Player('Video5', {
        events: {  
			     'onReady': vidplay} 
        });
        }
			
    function vidplay() {
       var video = document.getElementById("Video5");
       var button = document.getElementById("play");
	   
       if ( $("#play").hasClass("play")) {
			  button.addEventListener("click", function() {player.playVideo();});
		      button.addEventListener("click", function() {
              button.className += " pause";
              jQuery(button).removeClass('play');});
       } else {
               button.addEventListener("click", function() {player.pauseVideo();});
               button.addEventListener("click", function() {
				   button.className += " play";
                   jQuery(button).removeClass('pause');});
       }
    }

</script>
  </body>
  

</html>
Ответить с цитированием
  #2 (permalink)  
Старый 14.12.2017, 00:28
Новичок на форуме
Отправить личное сообщение для Cheshirka Посмотреть профиль Найти все сообщения от Cheshirka
 
Регистрация: 27.11.2017
Сообщений: 4

Нужная часть в общем вот
<div id="play">
 <iframe width="500" height="426" id="Video5" class="background-video-my" 
	 src="https://www.youtube.com/embed/JHz3pPoHDl4?rel=0&amp;showinfo=0&amp;controls=2&amp;start=2&amp;autoplay=1&amp;modestbranding=1&amp;enablejsapi=1" frameborder="0" allowfullscreen></iframe>
	</div>
	<script src="//www.youtube.com/player_api"></script>
    <script type="text/javascript">
		function onYouTubePlayerAPIReady() {
        player = new YT.Player('Video5', {
        events: {  
			     'onReady': vidplay} 
        });
        }
			
    function vidplay() {
       var video = document.getElementById("Video5");
       var button = document.getElementById("play");
	   
       if ( $("#play").hasClass("play")) {
			  button.addEventListener("click", function() {player.playVideo();});
		      button.addEventListener("click", function() {
              button.className += " pause";
              jQuery(button).removeClass('play');});
       } else {
               button.addEventListener("click", function() {player.pauseVideo();});
               button.addEventListener("click", function() {
				   button.className += " play";
                   jQuery(button).removeClass('pause');});
       }
    }

</script>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
YouTube Data API v3. Выборка и сорт-ка видео. Neugierig Общие вопросы Javascript 1 04.08.2016 12:35
Видео с Youtube в Safari (при закрытии popup не пропадает) metaller92 jQuery 1 01.07.2013 13:55
панель управления при воспроизведении видео с youtube zlodiak Библиотеки/Тулкиты/Фреймворки 2 12.04.2013 11:22
Загрузка видео на Youtube с помощью XHR2 RazDroid AJAX и COMET 2 15.01.2013 03:06
Lightbox налазит на видео с YouTube (хром/сафари) morrkes Элементы интерфейса 0 27.06.2012 13:26