Tag: youtube

滑动更改时，滑动滑块暂停youtubevideo: 我使用Jquery Slick Slider创建了一个图像滑块，它也有youtubevideo剪辑。当页面加载youtubevideo设置为滑块的第一张幻灯片时，它是自动播放并开始播放。我想，当我将滑块更改为下一张幻灯片时，youtubevideo停止播放。我看看其他stackoverflow的答案，但找不到任何东西。我试过这个 – 这是我的div结构 – 我用JS – $(“#mainSlider”).slick({ dots: true, autoplay: false, autoplaySpeed: 7000, speed: 500, pauseOnHover: true, responsive: [ { breakpoint: 1025, settings: { arrows: true, dots: false } } ] }) .on(‘afterChange’, function( e, slick, currentSlide ) { $(‘.bumper’).css(‘display’, ‘block’); playpausevideo($currentSlide.eq(e).data(‘youtubeplayer’), ‘pause’) }); Youtube JS – function onYouTubeIframeAPIReady(){ […]

在youtube api中检测播放事件: 我正在寻找一种通过Javascript在嵌入式Youtubevideo中检测播放事件的方法。现在我能够检测到状态变化，但我无法弄清楚如何取消绑定事件并触发另一个事件，说它已完成。我也不想使用add / removeEventListener，因为我猜IE8及以下版本没有这个function。我的代码到目前为止， function onYouTubePlayerReady(playerId) { console.log(‘loaded’); var ytPlayer = document.getElementById(playerId); ytplayer.addEventListener(“onStateChange”, “onytplayerStateChange”); } function onytplayerStateChange(newState) { console.log(“Player’s new state: ” + newState); if(newState === 1) { sendYtUrl(); } } function sendYtUrl() { console.log(‘play detected’); ytplayer.removeEventListener(“onStateChange”); } 我希望弹出sendYtUrl，删除监听器，然后做我需要做的任何事情，或者甚至更好，保持清洁并将其保留在同一个function中。提前致谢！

当youtubevideo完成时关闭fancybox弹出窗口: 我在页面加载时用youtubevideo弹出了一个弹出窗口。当video完成时，我需要关闭弹出窗口…是否可以集成此脚本？这是代码： $(document).ready(function() { $(“#yt”).click(function() { $.fancybox({ ‘padding’ : 0, ‘autoScale’ : false, ‘transitionIn’ : ‘none’, ‘transitionOut’ : ‘none’, ‘title’ : this.title, ‘width’ : 880, ‘height’ : 595, ‘href’ : this.href.replace(new RegExp(“watch\\?v=”, “i”), ‘v/’), ‘type’ : ‘swf’, ‘swf’ : { ‘wmode’ : ‘transparent’, ‘allowfullscreen’ : ‘true’ } }); return false; }); }); $(‘#foo’).bind(‘click’, function() […]

Youtube播放按钮在iphone上消失: 我有以下简单的两页html doc，它使用了Jquery Mobile： Video Video Heres a youtube video: And here’s a html5 video: Your browser does not support the video tag. 这里是jsfiddle的行动。在Iphone上，如果您从第一页导航到第二页并播放YouTubevideo，则所有内容均按预期工作。但是，如果您点击浏览器的后退按钮然后再次导航回到YouTubevideo，您将看到该窗口是黑色的，无法再次播放该video。我怎么能解决这个问题？请注意，我的目标是能够在移动平台上播放video。

jQuery：捕获图像加载事件错误404，可以这样做吗？: 我基本上循环了一堆youtubevideourl来获取每个video的id代码。然后我重复列表中的所有“缩略图”图像，并用youtubevideo缩略图url替换源代码。我目前遇到的问题是，如果video已从youtube中删除，则生成的图像源将不会返回正常运行的图像URL，但是替换仍然会触发，因此将损坏的图像URL放入列表中。在使用缩略图源替换初始图像源之前，如何让jQuery检测url是否仍然有效？这是我的代码循环遍历页面上的youtube剪辑并过滤其ID： function generateYoutubeThumbnails() { var YTT = {}; YTT.videos = $(‘.video-thumbnail’); // the placeholder thumbnail image YTT.videos.each(function(i) { YTT.url = $(this).attr(‘data-videourl’); // the youtube full url, eg: http://www.youtube.com/watch?v=F52dx9Z0L5k YTT.videoId = YTT.url.replace(/(.+?)watch\?v=/gi,”).replace(/\&(.+)$/gi,”); // find and replace to get just the id: eg: F52dx9Z0L5k YTT.snip = ‘http://img.youtube.com/vi/’+ YTT.videoId +’/hqdefault.jpg’; // the thumbnail url […]

使用oembed嵌入YouTubevideo: 我想使用oembed从youtube链接获取jQuery的嵌入代码： var url = “http://www.youtube.com/watch?v=iwGFalTRHDA”; url = encodeURIComponent(url); $.getJSON(‘http://youtube.com/oembed?url=’+url+’&format=json’, function(data) { console.log(data); }); 好吧，我没有得到任何数据。有趣的是，如果我浏览到url，我会得到正确的答案： http://www.youtube.com/oembed?url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DiwGFalTRHDA&format=json` 引导我去 { provider_url: “http://www.youtube.com/” title: “Trololo” html: “” author_name: “KamoKatt” height: 344 thumbnail_width: 480 width: 425 version: “1.0” author_url: “http://www.youtube.com/user/KamoKatt” provider_name: “YouTube” thumbnail_url: “http://sofzh.miximages.com/javascript/hqdefault.jpg” type: “video” thumbnail_height: 360 } 我还使用了jquery oembed插件，但是如果请求成功，也会抛出onError选项。我真的很期待一些想法……

Youtubevideo持续时间API v3: 嘿伙计们，我对youtube的api v3有点问题。问题是，如果json有这种结构 { “kind”: “youtube#videoListResponse”, “etag”: “\”tbWC5XrSXxe1WOAx6MK9z4hHSU8/1jshwBhrF6O49W3oUmNF7rmkgAQ\””, “pageInfo”: { “totalResults”: 1, “resultsPerPage”: 1 }, “items”: [ { “kind”: “youtube#video”, “etag”: “\”tbWC5XrSXxe1WOAx6MK9z4hHSU8/Zji9LPuiDCpb4GjgPpzdGgf85ws\””, “id”: “3wFq1-pK05o”, “contentDetails”: { “duration”: “PT1M1S”, “dimension”: “2d”, “definition”: “hd”, “caption”: “true”, “licensedContent”: true } } ] } 我希望获得这样的video时长？ $.getJSON( “https://www.googleapis.com/youtube/v3/videos?id=XXXX&key=XXXXX&part=contentDetails”, function( json ) { document.write( “JSON Data: ” + json[“items”][“contentDetails”][“duration”] ); […]

添加YouTube嵌入式video标题: 我正在尝试遍历页面中的每个YouTubevideo（使用iframe嵌入方法）并使用jQuery附加到video的每个标题。我的HTML看起来像这样： jQuery看起来像这样： var video = $(‘.video-container’); video.each(function() { var youTuberegex = /(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com(?:\/embed\/|\/v\/|\/watch\?v=))([\w-]{10,12})/g, videoID = youTuberegex.exec($(this).find(‘iframe’).attr(‘src’))[1]; $.getJSON(‘http://gdata.youtube.com/feeds/api/videos/’+videoID+’?v=2&alt=jsonc’, function(data){ var videoTitle = data.data.title; video.after(”+videoTitle+”); }); }); 所以，我（尝试）拍摄每个video并使用正则表达式来提取ID。然后，我使用video源检索标题，并将其附加到video-container 。这是一个jsFiddle 。如您所见，问题是每次都附加每个video的标题。我哪里出错了，这是实现我追求目标的有效方式吗？

Youtube iframe api检查video是否存在: 我正在处理一个带有文本输入的简单页面，用户可以在其中添加要插入页面的YouTubevideo的ID，然后我调用youtube的iframe api来加载video。但是，如果用户添加了不存在的ID，则会出现黑屏。我希望有人知道在加载之前检查video是否存在的方法。这是我的代码： $(document).ready(function() { $(‘#loadVid’).click(function() { var player; var urlVid = $(‘#urlVid’).val(); //GET THE VIDEO CODE FROM THE TEXT INPUT player = new YT.Player(‘player’, { height: ‘390’, width: ‘640’, videoId: urlVid, events: { ‘onReady’: onPlayerReady, ‘onStateChange’: onPlayerStateChange } }); }); });

通过jQuery在youtube嵌入式电影中启用自动播放: 我使用以下代码嵌入了YouTube电影：正如您在src属性中看到的那样，变量autoplay = 0。我在jQuery中编写了两行脚本，它应该将autoplay变量设置为1。 var title = $(“iframe#ytplayer”).attr(“src”); title.replace(“autoplay=0”, “autoplay=1”); 但它不起作用。怎么能正确完成？问候，大卫