javascript - YouTube Flash/HTML5播放器

标签 javascript html actionscript-3 youtube

我正在研究一个小型项目,该项目涉及获取播放视频时用户跳过的时间。

我正在使用API​​的javascript部分来播放视频,暂停等等,但我似乎无法理解如何获得用户跳过的时间。我知道我可以独自寻求...但是当用户这样做时似乎没有相应的事件

我试图找到当用户跳到特定时间时触发的事件...

从YT API中,我看到他们没有这样的事件(在javascript中,我不想基于HTML5和/或AS3创建自己的自定义播放器)。

最佳答案

似乎没有真正的方法可以执行此操作,但是您可能可以“拦截”并理解它,并且不会花费很长时间:

this page中,您可以看到该API可用的所有功能。您可以通过以下两种方式进行操作:

  • 不断使用计数器来检查并面对视频时间(这可能是个坏主意)。
  • 拦截播放器状态:
    播放器光标移动时,播放器有5 state:
    -如果玩家正在玩,则状态从1变为2,然后从2变为1。
    -如果玩家暂停,则他的状态不会发生任何变化。
    考虑到您可以拦截播放器状态,因此可以轻松获得播放器暂停时的当前时间,然后与用户重新开始播放时的当前时间相对。在这两种情况下,您都应该能够知道用户是否移动了光标。我对该API不太了解,所以我不知道播放器的其他状态是否对您的问题很重要。我认为这样,如果还不完善,那将是一个很好的起点,从这里开始发展您的想法。

  • 更新

    这里是经过测试的代码示例+ JSFIDDLE
    <!DOCTYPE html>
    <html>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
      <body>
        <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
        <div id="player"></div>
    
        <script>
    var doing = -1;
    var timenow=0;
    var timeold=0;
    var flag=0;
          // 2. This code loads the IFrame Player API code asynchronously.
          var tag = document.createElement('script');
    
          tag.src = "https://www.youtube.com/iframe_api";
          var firstScriptTag = document.getElementsByTagName('script')[0];
          firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    
          // 3. This function creates an <iframe> (and YouTube player)
          //    after the API code downloads.
          var player;
          function onYouTubeIframeAPIReady() {
            player = new YT.Player('player', {
              height: '390',
              width: '640',
              videoId: 'M7lc1UVf-VE',
              events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
              }
            });
          }
    
          // 4. The API will call this function when the video player is ready.
          function onPlayerReady(event) {
            event.target.playVideo();
          }
    
          // 5. The API calls this function when the player's state changes.
          //    The function indicates that when playing a video (state=1),
          //    the player should play for six seconds and then stop.
          var done = false;
          function onPlayerStateChange(event) {
        if(flag==1){
            flag=0;
            timenow=timeold;
        }else{
            if((doing==-1)&&(event['data']==1)){//start play
                doing=1;
            }
            if((doing==1)&&(event['data']==2)){//from play to pause
                timeold=player.getCurrentTime();
                timeold=timeold;
                doing=2;
                console.log('go pause at:'+timeold);
            }
            if((doing==2)&&(event['data']==1)){//from pause to play
                timenow=player.getCurrentTime();
                console.log('go play at:'+timenow);
                if(timenow>timeold){
                    alert('are you kidding me?! You switched from '+timeold+' to '+timenow+'!');
                    player.seekTo(timeold);
                    flag=1;
                }else{
                    timeold=timenow;
                }
            }
                if(event['data']==5 || event['data']<1){//stopped or ended
                        doing=-1;
                        timeold=0;
                        timenew=0;
                }
        }
          }
          function stopVideo() {
            player.stopVideo();
          }
        </script>
      </body>
    </html>
    

    关于javascript - YouTube Flash/HTML5播放器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17083460/

    相关文章:

    javascript - ssl 在网站中显示错误

    javascript - Bootstrap 导航对齐

    css - 使用 CSS 和 Div 制作两列布局

    apache-flex - 尝试在 Flex4/AS3 中将矩形绘制到自定义容器

    actionscript-3 - 为什么 AGAL 着色器需要及时编译?

    javascript - 获取 <tr> 的第 n 个子元素

    javascript - 将动态 JSON 对象绑定(bind)到 Kendo Grid

    html - 链接到 Google Apps 脚本中的另一个 HTML 页面

    html - 如何垂直对齐 DIV 中的输入

    android - AS3 Shoutcast 流在 AIR 3.2 中不起作用