I will be writing an application that uses the youtube API for videos. I want to integrate it with canvas. Is there anyway to make sure I get HTML5 compatible videos through the API calls?
In case you mean using <video />: the only way to embed YouTube-videos is <object /> or <iframe />. So, embedding via <video /> is not possible at this point and will most likely never be.
In case you mean validity: Both available options are valid in HTML5.
With the IFrame API, YouTube may use HTML video instead of Flash, but this can't be set manually. See this.
Related
What is SIMPLE and good practice to play background music in Rails App.
It's a really simple rails website. It has several static pages.
How do I playing music on background?
thanks!
I am not looking for detailed answer or code.
I just want somebody kindly point me some links, or some keywords I can search.
I googled around and did not find what I want/ Or I didnt realize that was I need.
with HTML 5, you can now use the tag like this. You can place this on any page that you want your music to play on. (layouts/application.html.erb if you want site-wide)
<audio src="public/my_audio_file.mp3" autoplay controls loop>
<p>Your browser does not support HTML5 audio playback</p>
</audio>
This link provides further details and options
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video
Add this to the pages on which you want the sound
<embed src="path/to/background.mp3" autostart="true" loop="true" hidden="true"><embed>
Add it to the layout if you want it in all the pages
I'm building a website for a music composer. He'd like to publish samples of his work via Soundcloud and embed some of those samples on his website. He has a Premium account.
I'd like to make this as easy as possible for him (he ain't no geek). Basically, I'd like to let him just copy & paste the song's URL from the browser's address bar and make my application do the rest for him.
That's relatively easy to do actually - and I successfully made it work with the standard version of the player. But I can't find a working way of programmatically embeding the tiny version of the player. There's no mention of the tiny player in the Soundcloud oEmbed reference and just setting the maxheight param to 18 doesn't do it for me.
The problem is, I need to actually generate the embed on every page, because the same song embedded on the home page should be rendered using the tiny player, whereas on a subpage it should be the full standard player - therefore I can't just allow him to copy&paste the embed code from soundcloud to my app, because I'd then either have a tiny player embed code or a standard player code available, not both of them. Copy&pasting two different embed codes for the same song seems too much trouble for such a simple thing.
Another thing is I can't properly test this as I don't have a Premium account myself and I don't have access to his account.. would be cool if there was a way for developers to "mock" a Premium account for development purposes...
Thanks for any and all help!
Dan
Unfortunately, /oembed only works for regular widget (HTML5 of flash) at the moment.
However, you can build the html for either of them yourself. Here's a template for tiny widget embed:
<object height="18" width="100%">
<param name="movie" value="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F{trackId}&player_type=tiny{widgetParams}"></param>
<param name="allowscriptaccess" value="always"></param>
<param name="wmode" value="transparent"></param>
<embed wmode="transparent" allowscriptaccess="always" height="18" width="100%" src="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F{trackId}&player_type=tiny{widgetParams}"></embed>
</object>
And the template for regular widget:
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F{trackId}{widgetParams}"></iframe>
You should put these into strings (without line breaks) and perform variable interpolation on these strings. I am not sure what language you are using, but most languages have this built in.
For JavaScript, which I'm writing most of the time, you could use Douglas Crockford’s supplant function.
The variables are trackId for which the value should be positive integer and widgetParams, for which the value should be something like &color=ff6600&auto_play=false, that is key=value pairs prefixed with &. I've used { and } as delimiters for variables to interpolate in my example, but it could, of course, be whatever your language or templates engine requires it to be.
For your client to be able to just give you a track URL, you'd need to do an API request to /resolve endpoint to retrieve track ID from track URL (permalink). You'd need to register as a developer to have client_id to authorise requests to the API. I've described how to do it in JavaScript in another answer here.
If you'd prefere not to do requests to the API, you could also ask your client to give you the embed code they can easily retrieve from any sound or set on SoundCloud by hitting "share" button, and then extract the sound or set ID using regular expression.
Here's an example of how this would work to insert a tiny widget (also using SoundCloud JS SDK) http://jsbin.com/OLUloX/1/edit
Im building a site which opens Youtube videos onsite using Shadowbox.
I have found out that linking to a video this way ...
http://www.youtube.com/watch?v=wDZFf0pm0SE
..doesn't work (Shadowbox opens, video doesnt play). But linking this way...
http://www.youtube.com/v/wDZFf0pm0SE
.. does.
Can someone explain to me what is going on here?
The /v/ link is a direct link to the video, which is used for embedding it. You use it like this:
<embed src="http://www.youtube.com/v/wDZFf0pm0SE&autoplay=1" type="application/x-shockwave-flash" wmode="transparent" width="800" height="600"></embed>
However, due to licensing restrictions some videos will fail to play in the /v/ format.
The &autoplay=1 part just tells it to start the video on page-load. (Remove it to not do that).
The normal link is used to watch the video from Youtube itself.
Hope this helps.
hi hello i'm new in this forum and new in youtube
i also created a sample
let me tell the steps
copied a sample youtube html script from http://groboclown.net/yt_playlist/howto-embed-long.html
and on clicking the sampl.html it just show the youtube player black color that all
what is the problem i put an alert in the onYouTubePlayerReady() {
but its not printing any thing WHY? how can i do the youtube embeddig please help me any body how can i do it
is a webserver as (tomcat or jboss etc)is always needed for it then how can do this please help me any body can
The simplest way to embed a youtube on a webpage is to use the embed code provided on the youtube page the video is on. It normally looks like this:
<object width="640" height="385"><param name="movie" value="http://www.youtube.com
/v/ZZZZZZZZZZZ&hl=en_US&fs=1"></param><param name="allowFullScreen" value="true">
</param><param name="allowscriptaccess" value="always"></param><embed
src="http://www.youtube.com/v/ZZZZZZZZZZZ&hl=en_US&fs=1" type="application/x-
shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385">
</embed></object>
Where ZZZZZZZZZZZ is the video id.
The script you are using is for creating youtube playlists. It is possible they are not playing because either embedding is disabled for the video you are trying to play, or the actual URL is invalid. Youtube video IDs have a specific length, and most frequently, people mistake the ID field as the whole URI. It is not, and a Gdata resource of http://www.yout makes a very poor youtubeID.
I would suggest getting the firebug plugin for firefox to check for errors and monitor the javascript calls to make sure they are actually being called when clicked.
If you are using the youtube API, check your server log to see if the incorrect Gdata resource is being cUrled, otherwise this will = FAIL.
Normally, youtube videos are in an .flv file format, so re-embedding the video in a separate flash player might cause it to not work properly if the direct URL to that file is not accessible. Normally the raw .FLV is never accessable because this in turn is separate sub-FLV embedded within the youtube player flash object.
The drop-down menus I have are falling behind the youtube video no matter what I give the z-index to the menu. A website said using wmode=transparent but that didn't work because youtube discontinued supporting that tag. Any ideas?
YouTube doesn't "block" any tags - when you embed a YouTube video, you control the html that you use to embed it. You are free to add whatever extra params you like.
That said, using wmode=transparent is a bad idea, since it will decrease performance of the swf.
Using wmode=opaque will help a little, but is still not as good as not specifying the wmode (leaving it as the default, which is 'window').
If you do set it to 'opaque', then you should be able to place HTML elements over the video and it should work in most browsers, but may have issues on certain browsers in linux, or if the user has an older flash player version.
If you're embedding the player on your site you need to add a param tag that sets the wmode:
<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/VIDEO_ID"></param>
<param name="wmode" value="opaque"></param>
<embed src="http://www.youtube.com/v/VIDEO_ID"
type="application/x-shockwave-flash" wmode="opaque"
width="425" height="350">
</embed>
</object>
This is an error with Flash. If you try to hide the flash video with any means it tends to overlap the existing content and pushes the video window forward.