Youtube Video In HTML5 <video> - html

I have made a windows store app using the Youtube Iframe API. I can handle events and play video fine but there is a major problem as it doesnt support full screen mode (amongst some other minor niggles).
I have been looking in the app store and I see that the majority of youtube player apps do not use the iframe API, they grab the video direct and put it into the standard HTML5 video player.
I have done a lot of searching and the only way I can see people are doing this is by parsing the youtube page to find the video file the Youtube player is going to play and loading this directly into the media player.
I have a few problems with this method.
I am not sure if this is legal as it may break youtubes terms and conditions
If page at youtube changes it can break app.
Neither of these situations are acceptable.
Is there any way to get full screen to work inside app or get a direct video stream legitimately?

Not sure about the copyright and youtube terms stuff but here is how you do it apparently:
Show Youtube video source into HTML5 video tag?
Looks like it's browser specific and youtube generates different html for different browsers.
I would make an ajax request to the youtube url appending html5-true then use jQuery to scrape the source for the video tag, add your attributes and then append to your page.
Now you have the tag that youtube uses so I'm assuming what works on their webpage will work o yours.
Probably violates all terms and conditions...

Related

How can I embed a youtube feed?

I want to embed the youtube upload page of my channel on my website.
I would like to know how I could do this. iframe doesn't seem to work.
There are two options available for you: (1) embed the webpage as a blockquote using Embedly, or (2) make a playlist of your uploaded videos and embed the playlist.
Use Embedly: The website Embedly uses a script to embed any webpage, including the uploads page of your YouTube channel, into a block quote. You'll be using their script in your HTML, so no guarantees on quality.
Make a playlist of your uploaded videos, then embed the playlist into your website by following the instructions on this page.
Good luck!
Looking at Youtube's API ... https://developers.google.com/youtube/player_parameters
They do have a user uploads feed.
https://www.youtube.com/embed?listType=user_uploads&list=USERNAME
IE for focuspullin channel
https://www.youtube.com/embed?listType=user_uploads&list=focuspullin
It provides a video as a and with a playlists that could be used in a iframe
But I would consider this subject to change. Google's knowledge graph shows completely different, older information, about an RSS feed. Unable to find that and it may no longer exist, [but there are several stackoverflow Q and A that reference it from a few years back.]

What are the differences between using an HTML5 embedded video vs. an iframe with a YouTube link?

I'm debating whether or not to store a video on my server and call it through an HTML5 tag, or upload the video onto YouTube and use an iframe to embed the YouTube link. I'm not sure which would work more efficiently, or the differences between each one. What are the differences between using a HTML5 video tag and using a YouTube link and iframe tag?
Using a self-hosted video with HTML5
Advantages:
Full Control over markup and interface
Disadvantages:
Browser support is in your hands
Video download will be slower on your server as compared to YouTube
Recommended Usage:
Use a javascript plugin like https://plyr.io/ which will help with cross-browser and responsive concerns. Serve the video from a CDN if possible
Youtube Hosted
Advantages:
Performant
Browser support is everything
Disadvantages:
YouTube branded by default
Little control over the interface
Recommended Usage:
Use iframe embed code provided by youtube. For responsive assistance, see http://embedresponsively.com/. Also plyr.io allows you to play YouTube videos.
For my experience with <iframe> and <video> tags:
I found an issue with the <iframe> tag when you want to do an autoplay for your video while using a mobile or tablet device with "Chrome" & "Apple".
In my case, I used to do a click function to play video, that's what is impossible with <iframe> tag, so I use the <video> tag to resolve the issue.

Load only audio from youtube in as3

Is it possible to load only the audio from YouTube into my AS3 flash custom player through youtube AS3 api?
I want to load it into a sound object and then assign it to a sound channel.
I would like to know if there is an "official" way to do this, I'd like to avoid improvising (like loading the whole stream and then use only the audio).
Thank you.
I suggest you read the YouTube terms of service carefully:
https://developers.google.com/youtube/terms
In particular, you may not "promote separately the audio or video components of any YouTube audiovisual content made available through the YouTube API".
Doing so in any way (such as moving the video off stage) is likely to have your site blocked for playbacks by YouTube for breach of terms of service.
NB: YouTube manages to provide the service it does through advertising on top of video content. Separating the content like this prevents YouTube from making any money from the service it is providing.
If you use it for private usage, its okay I guess.
After some research work with different APIs and libraries and researching source code, I just tried it by myself and wolla.
Just saying, audio only links are in the page source of each video.
You just have to know what you are looking for ;)
Open a youtube video, view page source and search for "mime%3Daudio". There should be 5 matches, full url for example:
"https%3A%2F%2Fr2---sn-35cxanpbo5a-8pxl.googlevideo.com%2Fvideoplayback%3Fsource%3Dyoutube%26signature%3D30EC556F55533FBFD9003767730D10556681F33A.B12E021CA54CCB9E225F58A4430E9BB528081FB5%26requiressl%3Dyes%26expire%3D1527306011%26clen%3D3064602%26initcwndbps%3D1152500%26ipbits%3D0%26mime%3Daudio%252Fmp4%26dur%3D192.911%26fvip%3D5%26lmt%3D1524946334873350%26key%3Dyt6%26sparams%3Dclen%252Cdur%252Cei%252Cgir%252Cid%252Cinitcwndbps%252Cip%252Cipbits%252Citag%252Ckeepalive%252Clmt%252Cmime%252Cmm%252Cmn%252Cms%252Cmv%252Cpl%252Crequiressl%252Csource%252Cexpire%26itag%3D140%26gir%3Dyes%26ip%3D81.217.53.239%26id%3Do-ALNxMeQYw4LLc1FAjxt4h795wKTdqJnzc_SBgzEJVBxR%26c%3DWEB%26keepalive%3Dyes%26mm%3D31%252C29%26mn%3Dsn-35cxanpbo5a-8pxl%252Csn-2gb7sn7r%26ei%3Du4IIW7DfC46rgAfrrpnICw%26ms%3Dau%252Crdu%26mt%3D1527284230%26pl%3D16%26mv%3Dm"
Just decode URL and you got what you want.

How to add video into a webpage for mobile web browsers

Our company is making a mobile version of our website. We have several product videos we want to show on the mobile version.
When I try to use
video
I get sound playing but a black screen on my htc incredible android os phone.
I'm thinking that the video is playing but in a different browser window. I need it to display all in one window without having to switch to a different window.
I tried the html embed tags and get no video or sound at all, from what I've read these tags are not very realiable cross browser.
I also just tried the html5 video tags below. I get an icon identifying that it's a video file but it doesn't play.
<video src="video.wmv" controls="controls">
your browser does not support the video tag
</video>
Is there a special format the video file needs to be in? Should I be using the href or embed tags, what other options do I have?
If it helps to know, I'm using the mobile doctype on my webpages.
Thanks
The video format you need to send to the browser varies by browser. Firefox supports Ogg Theora, everybody else seems to support H.264 in an MPEG-4 container (MP4 file.)
See here for an example: http://html5demos.com/two-videos
In any case, WMV won't work.
Android doesn't support the WMV format normally. Here is a list of the supported formats:
http://developer.android.com/guide/appendix/media-formats.html
If iPhone/blackberry/etc don't have a format in common, you may need some javascript magic based on the user-agent to choose which file to embed.
I've found a simple solution to my problem. YouTube. Upload videos on youtube that need to play on your mobile web site and they work. PERIOD.
No fuss! Just copy the embedded URL from the YouTube video page to your mobile page and your all set to go.
I'm not exactly sure how YouTube makes the videos compatible.I'm guessing when uploading the video it's automatically converted into several formats so that the right codec / container is played based on what smart phone is accessing the page.
This list is not extensive and I'll probably think of more later, but comment if you can think of any more advantages or disadvantages of using YouTube for mobile videos.
Advantages:
++ YouTube is universally accepted amongst most major smart phones (therefore your video should play!).
+ If you have limited bandwidth you don't need to worry about wasting any bandwidth of your own.
++ Easy to setup, little to no configuration (setting video resolution). It just works! (encapsulation...)
Disadvantages:
- YouTube symbol during video play back
- It's not hosted on your hosting service. May not be tracked by some analytic services. (requires custom tracking? onclick java-script event?)
- YouTube bandwidth may not be acceptable for smooth replay? (although from initial video viewing bandwidth seems acceptable (minimal buffering...), but not confirmed...). Probably mostly dependent on the cell phone 3g / 4g connection quality.
- limited video file size / resolutions? shouldn't be a problem because you'll want a lower quality video for smart phones.
I would like to know exactly how YouTube make it's videos compatible with smart phones so if necessary I could host the videos myself, but for now this seems to be the best choice.

Video in Browser: Embed YouTube and others

I want to embed videos from different video sites like YouTube, Vimeo and so on...
But I have a problem:
The Skins of the players are all different
and I want a consistent video skin.
Is there any possiblity to get this work?
I can't host the videos on my server because I have to pay for the traffic
and that would make me poor =(
I know that Youtube at least has a chromeless player, you can check out the API here: http://code.google.com/apis/youtube/js_api_reference.html#GettingStarted
I don't know about any of the other sites, though. I'd try Googling the name of the site and "chromeless" or "api" to see what comes up.
Simply put, no. The video site content has to include the skin for each site, unless you rip the video out and self-host it.
There's a reason for this, and I doubt you'd want to see the sites all fold/go paid because of people hijacking content without attribution.
Try Media Element JS
It wraps your youtube and vimeo video to a HTML5 video, no need to host the video on your website. The script from the website can take youtube and vimeo videos and make convert them into HTML5 video.
One side effect of this script is that since it can convert both Youtube and vimeo videos to HTML5 then the players will be the exact same for both of them.
Hope that helps,
regards