javascript - 刷新YouTube Javascript直到页面刷新

标签 javascript jquery youtube embed pageload

我有一个来自Javascript片段的youtube视频。该功能允许选择章节onClick-允许用户在不同时间播放视频(startSeconds)-在刷新页面或随机刷新之前,视频不会加载。第一次加载页面时,没有骰子。控制台中什么都没有显示,我已经在Chrome和Safari中对它进行了测试,结果相同。

我的代码:

<div id="player"></div>

<script type="text/javascript">
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 player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
  width: '800',
  videoId: 'YQY9BZBrZds',
  events: {
    'onStateChange': onPlayerStateChange    
  },
  playerVars:{
    rel: 0,
    wmode: "opaque"
  }         
});
}

function onPlayerStateChange(evt) {
if (evt.data == 0) {
      $('#video_popup').removeClass('hide_pop');
      $('#video_popup').addClass('display_pop');
}
else if (evt.data == -1) {
      $('#video_popup').removeClass('display_pop');
      $('#video_popup').addClass('hide_pop');
}
else {
      $('#video_popup').removeClass('display_pop');
      $('#video_popup').addClass('hide_pop');
 }
 }

function chapter1() {
//player.loadVideoById({'videoId': 'YQY9BZBrZds', 'startSeconds': 0});
  player.cueVideoById('YQY9BZBrZds', 0);
  player.playVideo();
}

function chapter2() {
//player.loadVideoById({'videoId': 'YQY9BZBrZds', 'startSeconds': 22});
player.cueVideoById('YQY9BZBrZds', 22);
player.playVideo();
}

function chapter3() {
//player.loadVideoById({'videoId': 'YQY9BZBrZds', 'startSeconds': 44});
player.cueVideoById('YQY9BZBrZds', 44);
player.playVideo();
}

function chapter4() {
//player.loadVideoById({'videoId': 'YQY9BZBrZds', 'startSeconds': 87});
player.cueVideoById('YQY9BZBrZds', 87);
player.playVideo();
}

function chapter5() {
 //player.loadVideoById({'videoId': 'YQY9BZBrZds', 'startSeconds': 149});
player.cueVideoById('YQY9BZBrZds', 149);
player.playVideo();
}

我的网站:
Click here
http://design.vast42.com/rcity/redux/

如您所见,视频位于1 2 3指示下。

我是从前S.O.那里获得此代码的帖子/ JSBin:
Link to source
YouTube API loadVideoById startSeconds not working

谢谢任何能提供真知灼见的人!

最佳答案

我认为您不应该使用cueVideoById。此功能将视频添加到播放器的提示。但这是同一视频。

This function loads the specified video's thumbnail and prepares the player to play the video.



您应该使用seekTo函数,它将使您的视频正确位置而无需重新加载视频。

Seeks to a specified time in the video. If the player is paused when the function is called, it will remain paused. If the function is called from another state (playing, video cued, etc.), the player will play the video.



文档:https://developers.google.com/youtube/js_api_reference?hl=en#seekTo

您的函数应如下所示:
function chapter1() {
    player.seekTo(0);
}

关于javascript - 刷新YouTube Javascript直到页面刷新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31300584/

相关文章:

javascript - 如何设置动态数据的css属性

javascript - 如何在 Datatable 的单元格内显示有关图标单击事件的对话框?

javascript - jQuery 和 Javascript : offset. top() 没有响应

android - 在 React Native 应用程序中嵌入 Youtube 视频

javascript - JavaScript 中的 .replace 方法和重复的字符

javascript - 如何使用 highcharts 将 x 轴标签向左移动?

javascript - 将 JSON 对象项添加到具有相同类的 DIV

javascript - 如何使用搜索过滤器形式搜索 JSON 数组?

youtube - 如何使用YouTube数据API v3获取观看历史记录?

android - 应用内购买中未列出的Youtube视频