Question

我正在使用Youtube iframe API使用Javascript播放视频。我希望视频在文档加载时最初播放，然后当你鼠标移开它会暂停，然后当你鼠标悬停它时它将再次开始播放，依此类推。我遇到的问题是如何最初使用$(document).ready()播放视频。我想也许我需要一种方法来检测视频是否被加载，因为它说它不能playVideo()因为播放器1未定义？鼠标悬停和鼠标移动部分工作......

谢谢！

编辑：onYouTubeIframeAPIReady();加载了超过1个视频。

JS

  var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player1;

  function onYouTubeIframeAPIReady() {
      player1 = new YT.Player('video', {
      height: '390',
      width: '640',
      videoId: '7YRsdlkfH9c'
    });

    player2 = new YT.Player('video2', {
      height: '390',
      width: '640',
      videoId: 'vn-rlbsdfasd'
    });
  }

$(document).ready(function(){      
      playVideo1();
});

$(".top-left").mouseover(function () {
      playVideo1();
 })

function playVideo1 () {
      player1.playVideo();
}

$('.top-left').mouseout(function (){
      stopVideo1() ;
})

function stopVideo1() {
      player1.pauseVideo();
}

$(".bottom-left").mouseover(function () {
      PlayVideo2 ();
})

function PlayVideo2 () {
    player2.playVideo();
}

$('.bottom-left').mouseout(function (){
  stopVideo2 () ;
})

function stopVideo2() {
  player2.pauseVideo();
}

Answer 1

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.bebbo203.mymuseum.MuseumActivity"> <android.support.v7.widget.RecyclerView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/recyclerViewMuseum" android:scrollbars="vertical" android:scrollIndicators="none" android:gravity="center_horizontal" /> </RelativeLayout>在<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:baselineAligned="false" xmlns:card_view="http://schemas.android.com/apk/res-auto"> <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="150dp" android:id="@+id/cardView" card_view:cardCornerRadius="2dp" card_view:cardUseCompatPadding="true" android:gravity="center_horizontal" android:animateLayoutChanges="true" > <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:layout_width="match_parent" android:layout_height="150dp" android:id="@+id/imageViewList" android:layout_gravity="center_horizontal|top" android:adjustViewBounds="true" android:scaleType="centerCrop"/> <TextView android:id="@+id/textViewList" android:layout_width="match_parent" android:layout_height="150dp" android:textSize="40sp" android:textIsSelectable="false" android:textAlignment="center" android:gravity="fill" android:textStyle="bold" android:layout_weight="1" android:layout_gravity="center_horizontal|top"/> </FrameLayout> </android.support.v7.widget.CardView> </RelativeLayout>`之前触发，因此视频尚未实例化。您必须将初始播放移动到此回调函数。删除$(document).ready调用并将playVideoFunction添加到API Callback：

onYouTubeIframeAPIReady

Answer 2

如果有人仍然遇到这个问题，这对我有用 - 我使用了youtubeIframeApi中的events对象。在这个例子中，我也使用jQuery，因此必须在此代码之前加载它。

          // Set up vars
          var $video = $('.video-popup');
          var player;

          // Load iframe API
          var tag = document.createElement('script');
          tag.src = "//www.youtube.com/iframe_api";
          var firstScriptTag = document.getElementsByTagName('script')[0];
          firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

          // If video activated the first time, run playback from within onPlayerReady event
          onPlayerReady = function(event){
              // Play the video
              $video.fadeIn(300, function(){
                player.playVideo();
            });
          }

          // If video was ready and stopped or closed, there won't be onPlayerReady event, so we must run video manually
          $video.fadeIn(300, function(){
              app.popupResize();
              // Just making sure player really has initialized
              if(typeof player != 'undefined' && typeof player.playVideo == 'function'){
                  player.playVideo();
              }
          });

          // Init video
          onYouTubeIframeAPIReady = function () {
              player = new YT.Player('yt_player', {
                  height: '420px',
                  width: '100%',
                  videoId: 'example-id', // youtube video id
                  playerVars: {
                      'autoplay': 1,
                      'rel': 0,
                      'showinfo': 0,
                      'controls': 0
                  },
                  events: {
                      'onReady': onPlayerReady
                  }
              });
          }

Youtube iframe API ...因为未定义而无法播放视频（）

2 个答案: