javascript – 来自网址的youtube视频ID [复制]（youtube视频url源代码怎么找）

25-02-19 16

如果您对javascript–来自网址的youtube视频ID[复制]和youtube视频url源代码怎么找感兴趣，那么这篇文章一定是您不可错过的。我们将详细讲解javascript–来自网址的you

如果您对javascript – 来自网址的youtube视频ID [复制]和youtube视频url源代码怎么找感兴趣，那么这篇文章一定是您不可错过的。我们将详细讲解javascript – 来自网址的youtube视频ID [复制]的各种细节，并对youtube视频url源代码怎么找进行深入的分析，此外还有关于iframe / Javascript检查Youtube视频是否结束、javascript – Youtube API：查看当前正在播放的视频ID、javascript – 从我的构造函数对象创建youtube iframe视频,以便创建多个视频、javascript – 单击按钮时更改嵌入式YouTube视频中的时间的实用技巧。

本文目录一览：

javascript – 来自网址的youtube视频ID [复制]（youtube视频url源代码怎么找）
iframe / Javascript检查Youtube视频是否结束
javascript – Youtube API：查看当前正在播放的视频ID
javascript – 从我的构造函数对象创建youtube iframe视频,以便创建多个视频
javascript – 单击按钮时更改嵌入式YouTube视频中的时间

javascript – 来自网址的youtube视频ID [复制]（youtube视频url源代码怎么找）

参见英文答案 > YouTube url id Regex 1个
我已从其他stackoverflow页面获取这些代码以更正youtube链接,但它们不适用于我的网址：

https://www.youtube.com/watch?v=r2dRQHJ-aAk

码：

<script>
$('#videoURL').focusout(function() {
    var url = this.value;
    var videoid = url.match(/(?:https?:\/{2})?(?:w{3}\.)?youtu(?:be)?\.(?:com|be)(?:\/watch\?v=|\/)([^\s&]+)/);
    if(videoid != null) {
      $('#videoURL').value('http://www.youtube.com/watch?v='+videoid[1]);
    } else { 
        console.log("The youtube url is not valid.");
    }
});

</script>

它总是返回：

The youtube url is not valid

解决方法:

您不需要正则表达式：

var videoid = url.split('v=')[1];
var ampersandPosition = videoid.indexOf('&');
if(ampersandPosition != -1) {
    videoid = video_id.substring(0, ampersandPosition);
}

如果您愿意,可以使用它：

var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;

iframe / Javascript检查Youtube视频是否结束

现在我通过iframe加载youtube视频.甚至可以检查youtube视频是否在这种状态下结束？我可以通过Iframe使用OnStateChange()吗？

解决方法

是的,但这是一个实验性的API：

https://developers.google.com/youtube/iframe_api_reference

javascript – Youtube API：查看当前正在播放的视频ID

有没有办法显示/查看/返回当前播放的视频(因此,哪个videoID)？

这是Iframe API的基本代码：

var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player',{
      height: '390',width: '640',videoId: 'pJ18QeQy0e8',events: {
        'onReady': onPlayerReady,'onStateChange': onPlayerStateChange,'onError': onError,},playerVars: {

                    'controls': 0,'showinfo': 0,'iv_load_policy': 3,'wmode': "opaque",});
  }

第一个视频完成后.此事件将被调用：

function onPlayerStateChange(event) {
if(event.data === 0) {    
        player.stopVideo();
player.loadVideoById(getId());          

        }
  }

getId()函数将获得另一个videoId来播放..

我想在DIV中显示,videoId当前正在播放

解决方法

player.getVideoData()['video_id']

要么

var video_data = player.getVideoData()
video_data['video_id']

解：

function onPlayerStateChange(event) {
    if(event.data === 0) {    
        player.stopVideo();
        player.loadVideoById(player.getVideoData()['video_id']);
    }
}

javascript – 从我的构造函数对象创建youtube iframe视频,以便创建多个视频

我正在尝试使用youtube iframe api创建一个youtube视频以及我正在处理的构造函数但是我遇到了绊脚石.在我的播放器功能中,我创建了一些默认属性,然后将一些新属性传递给我的新对象,以便通过扩展默认属性和新属性来创建播放器.我现在的问题是,我不确定我是如何实际初始化youtube视频的？我不确定玩家=新YT.Player(‘玩家’,{应该去哪里？

这是JS im正在进行的工作和jsfiddle http://jsfiddle.net/kyllle/6zuh5/7/

function Player(options) {  
  var $player = $(options.id);

  var defaults = {
    height: '100',
    width: '200',
    videoId: 'u1zgFlCw8Aw',
    events: {
      'onReady': onPlayerReady

    },
    playerVars: {
      modestbranding: 0,
      controls: 0, //remove controls
      showinfo: 0,
      enablejsapi : 1,
      iv_load_policy: 3
    }
  };
     
  var combinedOptions = _.extend(defaults, options);
  console.log('Combined Options', combinedOptions);

  return {    
    pause: function () {      
      $player.pauseVideo();    
    },
        
    seek: function () {       
      //$player.seekTo();          
    },
        
    destroy: function () {      
      $player.destroy();    
    },
        
    changeVideo: function () {      
      $player.stopVideo();    
    }  
  }
};

function onPlayerReady() {
  console.log('player fired');
}

var myPlayer = new Player({  
    id: '#divId',
    autoplay: true,
    videoId: 'asdadads'
});

解决方法:

在changeVideo函数之后添加一个名为init的函数.然后在实例化Player之后,您将在该新实例上调用init. (即myPlayer.init())

这是我正在思考的一个例子：我省略了下划线而是使用了jQuery的$.extend函数,所以我没那么乱了：

<html>
<head>
    <title>Video Player</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        function Player(options) {  

        var defaults = {
            height: '100',
            width: '200',
            videoId: 'u1zgFlCw8Aw',
            events: { 'onReady': null},
            playerVars: {
                  modestbranding: 0,
                  controls: 0, //remove controls
                  showinfo: 0,
                  enablejsapi : 1,
                  iv_load_policy: 3
             }
          };

          var combinedOptions = $.extend(defaults, options);
          console.log('Combined Options', combinedOptions);

          return {
            player: null,

            pause: function () {      
                this.player.pauseVideo();    
            },

            seek: function () {       
              //this.player.seekTo();          
            },

            destroy: function () {      
                this.player.destroy();    
            },

            changeVideo: function () {      
                this.player.stopVideo();    
            },

            onPlayerReady: function() {
                this.player.play();
            },

            init: function() {
                this.player = new YT.Player(combinedOptions.id, {
                height: combinedOptions.height,
                width: combinedOptions.width,
                videoId: combinedOptions.videoId,
                events: {
                    'onReady': this.onPlayerReady,
                    'onStateChange': null
                }
                });
            }
             }
        };


        var myPlayer;
        function onYouTubeIframeAPIReady() {
            myPlayer = new Player({  
                id: 'divId',
                autoplay: true,
                videoId: 'NeGe7lVrXb0'
            });

            myPlayer.init();

        }

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


    </script>
</head>
<body>
    <div id="divId"></div>
</body>
</html>

javascript – 单击按钮时更改嵌入式YouTube视频中的时间

我想嵌入一个youtube视频并提供按钮,当你点击它们时,它会转到视频中的特定时间并从那里继续播放.
我尝试过使用jquery并更改“src”属性,如下所示：

原始来源：

<iframe src="http://www.youtube.com/embed/PjDw3azfZWI?&t=5m30s&rel=0&amp">

JS：

$("#link1").click(function() {
    $("#video").attr("src", "http://www.youtube.com/embed/PjDw3azfZWI?&t=10m30s&rel=0&amp");
});

这导致浏览器在单击按钮时刷新.

链接到我正在思考的图像：http://i.imgur.com/sCFZSIn.png.单击按钮应该使视频跳转到指定的时间.

解决方法:

您不应重新加载iframe来控制视频;使用Javascript API方法.在这里查看seekTo：https://developers.google.com/youtube/iframe_api_reference#Playback_controls

基本上,一旦你的iframe加载,JS API将调用onYouTubeIframeAPIReady(),你可以在其中构建一个YouTube播放器对象.然后您可以使用该播放器参考来控制视频,例如player.seekTo().

你仍然可以使用你的iframe,如this section的botton所述：

As mentioned in the Getting started section, instead of writing an
empty element on your page, which the player API’s JavaScript
code will then replace with an element, you Could create the
tag yourself.

…

If you do write the tag, then when you construct the YT.Player object, you do not need to specify values for the width and height, which are specified as attributes of the tag, or the videoId and player parameters, which are are specified in the src URL.

您的代码缺失的部分是YT.Player对象,您必须在上面提到的回调方法中构造它.这提供了对播放器控件的访问.

这是一个Fiddle演示：

var player, seconds = 0;
function onYouTubeIframeAPIReady() {
    console.log("player");
    player = new YT.Player('player', {
        events: {
          'onReady': onPlayerReady
        }
      });
}

function onPlayerReady(event) {
    event.target.playVideo();
}

function seek(sec){
    if(player){
        seconds += sec;
        player.seekTo(seconds, true);
    }
}

您可以将此代码放在单独的脚本中,但要确保它位于根范围内(例如在head标记中),而不是将其放在onLoad处理程序中.

关于javascript – 来自网址的youtube视频ID [复制]和youtube视频url源代码怎么找的介绍已经告一段落，感谢您的耐心阅读，如果想了解更多关于iframe / Javascript检查Youtube视频是否结束、javascript – Youtube API：查看当前正在播放的视频ID、javascript – 从我的构造函数对象创建youtube iframe视频,以便创建多个视频、javascript – 单击按钮时更改嵌入式YouTube视频中的时间的相关信息，请在本站寻找。

本文标签：