我有一个带有popup.html和注入内容脚本的chrome扩展.使用注入的内容脚本我试图访问youtube的javascript API函数,除了一个:addEventListener之外它一切正常.
Youtube的javascript API的事件监听器监听要更改的视频的状态.因此,如果到达视频结尾,则状态变为0.
var currentVideo = document.getElementById('movie_player');
currentVideo.addEventListener("onStateChange", "onytplayerStateChange");
function onytplayerStateChange() {
console.log("The state of the player has changed");
}
这段代码在正常环境中工作正常,但它无法在内容脚本中工作.为什么我不能在内容脚本中捕获更改事件？有任何想法吗？
javascript google-chrome google-chrome-extension youtube-javascript-api
我在我的网站上使用Youtube(v3)API,其中显示了许多YouTube视频缩略图.例如:https://i1.ytimg.com/vi/0ZL_q7oUVrQ/mqdefault.jpg
当我查看我的网站的Google Insights(https://developers.google.com/speed/pagespeed/insights/)时,它会抱怨"利用浏览器缓存"错误.我已经注意到添加了来自我的服务器的静态资源的到期日期,例如js/css文件,但Google的见解主要是抱怨外部直接来自Youtube服务器的缩略图.
我的网站有很多,这些缩略图和缓存它们是非常重要的,快速的页面加载但YouTube的服务器已经为只有6个小时的到期时间,我没有找到一个方法来改变,因为他们是外部到我的服务器.
我非常感谢有人可以建议我更好地处理浏览器缓存,因为资源来自外部服务器(例如来自youtube服务器的缩略图)我很惊讶Youtube只设置了到期时间6小时虽然图像是经常更换的最不可能的资源......!
youtube-api http-caching browser-cache pagespeed youtube-javascript-api
我在我的网页上嵌入了YouTube视频,并能够检测用户何时点击了视频上的播放和暂停状态.
我还需要能够检测用户何时进行搜索/跳转到视频的特定部分(而不是让它只是播放到该点).我该怎么做呢？
我使用的是Youtube iframe api:https://developers.google.com/youtube/iframe_api_reference
我可以通过启动一个计时器来检查这个问题,如果视频播放的时间超过一秒,则每秒检查一次,如果是这样的话,可以将其视为搜索.但是,似乎应该有一种更简单的方法.
在这里，我尝试如下：
HTML
<iframe id="player" style="position: relative; height: 220px; width: 400px" src="http://www.youtube.com/embed/7a_CVFRqYv4?rel=0&enablejsapi=1"></iframe>
脚本
var player;
function onYouTubePlayerAPIReady() {player = new YT.Player('player');}
在这里我想要这样的动作，比如当播放器计时达到 6 秒时，我想更改 iframe 的 src。
我设法启动视频并在我需要的时候结束视频,但有没有办法循环这个？循环选项似乎没有做太多.
小提琴: https ://jsfiddle.net/u7nkz292/
码:
<div id="ytplayer"></div>
<script>
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
height: '360',
width: '640',
videoId: 'M7lc1UVf-VE',
playerVars: {
autoplay: 1, // Auto-play the video on load
controls: 0, // Show pause/play buttons in …我似乎无法弄清楚我应该为哪个元素添加事件监听器才能在iOS上工作,我正在听这些事件
['webkitfullscreenchange', 'mozfullscreenchange', 'fullscreenchange', 'MSFullscreenChange'];
并且听取document你传递给它们的元素和两个元素new YT.Player(),它们在桌面浏览器和Android浏览器上都很好,但是在iOS上都没有激发(chrome或safari,无关紧要).
你可以在这里查看它,在底部http://youtubeplayer.fxck.cz/ -1, 1, 2, 3是标准的youtube播放器事件,1337 fullscreenchange来自元素,1338 fullscreenchange来自document.
我正在尝试在"播放器"div中显示图像,然后在访问者单击按钮后,将其替换为视频(将div替换为iFrame).这是我的代码:
<!DOCTYPE html>
<head>
<style type="text/css">
html {
text-align: center;
}
#player {
display: inline-block;
width: 640px;
height: 360px;
background: url(http://placehold.it/640x360) no-repeat;
}
</style>
</head>
<html>
<body>
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
<p><button onclick="playMe()">Play</button></p>
<script>
function playMe() {
// 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 API seekTo函数是否接受浮点或帧中的时间？你能深入到两位小数吗？
我有一个YouTube直播活动.我可以使用YouTube IFrame播放器API播放视频.我想知道如果视频是直播活动视频或常规上传视频,我能找到任何方式.我需要这些信息来设计我的控件.
假设我想查找副标题中包含“法国总统选举”一词的视频列表。
我可以使用 YouTube API 做到这一点吗？
如果它甚至可以在人工生成和自动生成的字幕中搜索，那将是完美的。但是如果它可以搜索两种类型的字幕中的任何一种就足够了。
youtube youtube-api subtitle youtube-javascript-api youtube-data-api
youtube-api ×8
javascript ×6
youtube ×4
html ×1
http-caching ×1
ios ×1
jquery ×1
pagespeed ×1
subtitle ×1