I'm tyring to embed a youtube video using swfobject. I've written a function so that the video plays when a link is clicked. Everything works like a charm in firefox, but in IE6, it says 'ytplayer is undefined' and the video loads, but does not play. Where am I going wrong?
Here's the .js file:
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF(vidurl, "ytplayer", "470", "350", "8", null, null, params, atts);
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
}
function play() {
document.getElementById('videooverlay').style.display="none";
document.getElementById('playbutton').style.display="none";
ytplayer.playVideo();
}
I think your ytplayer.playVideo(); may be getting called before the video loads completely. Try calling play() from within onYouTubePlayerReady().
Related
Requesting mic with audio:true works perfectly fine, however requesting webcam video, or screen video is failing with SourceUnavailbleError. I have added the string of browser to the preference media.getusermedia.screensharing.allowed_domains
Code for requesting webcam video:
var param = {
// audio: true, // if just this it works fine
video: true // {mediaSource: 'screen'} does not work either
};
navigator.mediaDevices.getUserMedia(param).then(function(stream) {
console.log('success');
})
.catch(function(err) {
console.error('err:', err)
});
To reproduce this error, open up browser console, and paste the code above like this:
Error given is:
err: MediaStreamError { name: "SourceUnavailableError", message: "Failed to allocate videosource", constraint: "", stack: "" }
Do you know how I can get around this SourceUnvailableError?
I did a lot of digging here - https://dxr.mozilla.org/mozilla-central/source/browser/modules/webrtcUI.jsm#201 - but no success yet.
Thanks
I used some code to find the latest video from a specific channel, I have a basic idea of how it works, but I’m not sure how it sources the video. If someone could explain that'd be great
<!--Latest video-->
<h1 class="title"> Latest video </h1>
<div id="static_video"></div>
<!--Source the latest vdeo-->
<script type="text/javascript">
function showVideo(response) {
if(response.data && response.data.items) {
var items = response.data.items;
if(items.length>0) {
var item = items[0];
var videoid = "http://www.youtube.com/embed/"+item.id;
console.log("Latest ID: '"+videoid+"'");
var video = "<iframe width='720' height='480' src='"+videoid+"' frameborder='0' allowfullscreen></iframe>";
$('#static_video').html(video);
}
}
}
</script>
<script type="text/javascript" src="https://gdata.youtube.com/feeds/api/users/UC9DiuD3z0btMOAMG_FvDRag/uploads?max-results=1&orderby=published&v=2&alt=jsonc&callback=showVideo"></script>
It can be seen here
Another help would be, how can I show all the videos, with a search box to, well search through them. Sorry if I seem greedy but it would be a MASSIVE help if some one could explain.
EDIT: Bump, I don't like bumping, but I need this answered, please help me!
First the API V2 is deprecated, you need to use the YouTube API v3 with the ressource search.list
You need an API Key, follow this link to get one.
Use this parameters to get the lastest upload of the channel :
part: 'snippet' or 'id'
channelId: 'UC9DiuD3z0btMOAMG_FvDRag'
maxResults: 1
order: date
https://www.googleapis.com/youtube/v3/search?part=id&channelId=UC9DiuD3z0btMOAMG_FvDRag&maxResults=1&order=date&key={YOUR_API_KEY}
The output :
"items": [
{
"kind": "youtube#searchResult",
"etag": "\"PSjn-HSKiX6orvNhGZvglLI2lvk/9r2l5FZB6-ysy9_0d37qYA5Kg8I\"",
"id": {
"kind": "youtube#video",
"videoId": "WH8U2NQ_fnA"
}
}
Then you have the last video ID of the channel.
After that, you need to use the YouTube API player.
A live example to show you how the player works : http://jsbin.com/vajobawiba/1/edit?html,js,output
You just need to copy that code with the video ID you get from the previous step !
Example :
Add this line at the end of the body in your index.html
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>
And there is the javascript example:
function googleApiClientReady() {
var apiKey = 'YOUR_API_KEY',
youtubeId,
request;
gapi.client.setApiKey(apiKey);
gapi.client.load('youtube', 'v3', function() {
request = gapi.client.youtube.search.list({
part: 'id',
channelId: 'UC9DiuD3z0btMOAMG_FvDRag',
maxResults: 1,
order: date
});
request.execute(function(response) {
if(response.pageInfo.totalResults != 0) {
youtubeId = response.result.items[0].id.videoId;
}
});
});
}
I'm trying to build a playlist of YouTube URLs using Video.js, and 2 plugins for Video.js: videojs-playlists and videojs-youtube. Everything is included correctly and working nicely when each plugin is used individually. However, when I try to use the playlist plugin to play a list of YouTube URLs, I get the video loading wheel in FF (which never ends!) and in Chrome, the opening frame is loaded but the Play button is unresponsive. Firebug shows no errors in the code, yet clearly something is stalling somewhere. Here's the relevant code:
HTML:
video id="video" class="video-js vjs-default-skin" controls data-setup='' width="640" height="264"></video>
<h1></h1>
<button type="button" data-action="prev">Previous</button>
<button type="button" data-action="next">Next</button>
And my JS:
var videos = [
{
src : [
'http://stream.flowplayer.org/bauhaus/624x260.webm',
'http://stream.flowplayer.org/bauhaus/624x260.mp4',
'http://stream.flowplayer.org/bauhaus/624x260.ogv'
],
poster : '',
title : 'Whales'
},
{
src : [
'https://www.youtube.com/watch?v=3sWPKAbQZVM'
],
poster : 'http://www.videojs.com/img/poster.jpg',
title : 'Ocean'
}
];
var options = { "techOrder": ["youtube", "html5", "flash"] };
//var options = { "techOrder": ["youtube"] , "src" : "https://www.youtube.com/watch?v=GaMcsKtBDwE"}; //Single works - but not with playlist
var player = videojs('video', options);
player.playList(videos, {
getVideoSource: function(vid, cb) {
cb(vid.src, vid.poster);
}
});
$('[data-action=prev]').on('click', function(e) {
player.prev();
});
$('[data-action=next]').on('click', function(e) {
player.next();
});
});`
I tried these plugins recently and I found the problem.
The problem is here:
getVideoSource: function(vid, cb) {
cb(vid.src, vid.poster);
}
Make sure you set the first value for the cb method is a link string instead of an object.
(ex:'https://www.youtube.com/watch?v=videoID')
Good luck :)
I'm using the Soundcloud Javascript SDK (http://developers.soundcloud.com/docs/api/sdks#javascript) on a project and have happily got my player loading a sound and playing it like so:
SC.get("/resolve/",{
url: href
},function(response){
SC.stream("/tracks/"+response.id,{},function(sound){
sound.play();
});
})
I can trigger the soundmanager object to play in the callback using sound.play() but I can't work out how to access the events of the object mantioned in the docs (http://www.schillmania.com/projects/soundmanager2/doc/) like whileplaying()
How do I add these in? I've tried this kind of thing:
sound.whileplaying(function(){
alert("hooray!")
})
But that doesn't work.
Many thanks
Julian
This should work:
SC.stream("/tracks/" + response.id, {
whileplaying: function () {
console.log("track is playing");
}
}, function (sound) {
sound.play();
});
The correct way is:
SC.stream('/tracks/' + response.id).then(function (player) {
player.on('finish', function () {
console.log('finish');
});
player.play();
});
You found this answer and consult all events here:
https://developers.soundcloud.com/docs/api/sdks#player
This seems to be a recurring issue as there have been a number of similar posts on the YouTube API Google Group over the past couple of years. Using the YouTube iFrame API (only tried HTML5 not Flash) the onStateChange event fires correctly (and calls the specified handler), but the data property passed is undefined. I'm running OS X Mountain Lion and the error occurs using both Chrome (23.0.1271.64) and Safari (6.0.2).
Any thoughts on what the issue might be would be most appreciated.
Selected code snippets
myapplication.controllers.Player = function(containerId, videoId) {
[...]
this.player = new YT.Player(this.currentView_.playerContainer_, {
videoId: videoId,
playerVars: { 'showinfo': 0, 'modestbranding': 1, 'rel': 0 },
suggestedQuality: 'medium'
});
[...]
goog.events.listen(this.player, 'onStateChange', this.onPlayerStateChange_,
false, this);
[...]
};
myapplication.controllers.Player.prototype.onPlayerStateChange_ = function(e) {
if (e.data == 1) {
this.startTimer_(100);
} else {
this.stopTimer_();
};
};