Notified today that vimeo on chrome push the F11 button for you !
I haven't found any info on how it work but it's very cool.
I'm using mediaelement.js for now, is they planning to implement this ?
To try it open a video on vimeo, make sure you are in HTML5 (bottom right of post, on top right of the comments) and click "Switch to HTML5 player"
Play a video in a real fullscreen !
Chrome dev channel now comes with the fullscreen API
Sample usage:
<video width="300" src="movie.webm" controls></video>
<button onclick="enterFullscreen()">Get Huge!</button>
function enterFullscreen() {
var elem = document.querySelector('body');
elem.onwebkitfullscreenchange = function(e) {
console.log("Entered fullscreen!");
elem.onwebkitfullscreenchange = onFullscreenExit;
};
elem.webkitRequestFullScreen();
}
See this slide deck for usage, and here's a demo of the API in action.
Related
I'd like to play the video automatically in fullscreen mode when clicked the play button.
So far, I have to click two buttons (go to fullscreen and play).
Is there some html attribute that can join these two actions?
There's not a single attribute for this, but you can solve this with JavaScript:
document.getElementById("videoplayer").addEventListener("playing", event => {
const player = document.getElementById("videoplayer");
if (player.requestFullscreen)
player.requestFullscreen();
else if (player.webkitRequestFullscreen)
player.webkitRequestFullscreen();
else if (player.msRequestFullScreen)
player.msRequestFullScreen();
})
<video id="videoplayer" src="https://www.w3schools.com/tags/movie.mp4" controls></video>
Please note, that it doesn't work in this snippet environment.
We are using tag for acting as an animated GIF replacement on our website(ucraft.com).
On the top screen of the page there is a background image, on which we have text and a call to action button.
After that there is another block of content, where we have a video on the left and text on the right...
After that block there are 2 other blocks with the same scenario: tag and text.
On mobile(iOS and Chrome) the browser is waiting for the videos to autoplay, after which ONLY it shows the background image in the first(top) screen.
Thus Lighthouse is giving an issue that the rendering is not really well organized.
From the other hand, the UX on the website is bad, because the users don't really understand what to do, as the image is not being loaded(which is important) until the ALL videos of the page is loaded.
Due to this, Google's pagespeed gives us a grade of 30 for mobile, but 90 for desktop.
Please see the pagespeed result here: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.ucraft.com
Or you may also open the homepage on your device and see...
Here is the code we are using for the video:
<video class="lazy" width="100%" height="100%" webkit-playsinline="true" autoplay muted playsinline="true" data-status="loaded" loop>
<source data-src="https://storage.googleapis.com/ucraft.com/videos/domain-homepage.mp4">
<source data-src="https://storage.googleapis.com/ucraft.com/videos/domain-homepage.webm">
</video>
And this code, that we are putting into the to lazyload the video:
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));
lazyVideos.forEach(function(video){
for (var source in video.children) {
var videoSource = video.children[source];
if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
videoSource.src = videoSource.dataset.src;
}
}
video.load();
video.classList.remove("lazy");
});
});
</script>
Are we missing anything to tell browser to load everything, including the tag and to show the poster, before the video is ready to play?
Firstly, you should be using a background color, a background image, and then your video, in that order. Users shouldn't have to wait for an image nor a video to be able to see some text.
Next, stop lazy-loading your video! The browser already does a pretty good job of deferring video loads. It's not your responsibility to change that.
Finally, there is no poster on your video. Not sure if you intended to use one there or not, but since you mentioned it in your question, I thought I'd point it out.
I'm using vimeo player js API with froogaloop library for starting video when user clicks on the specific button on the site.
Here is how I embed video:
<iframe id="my_video" src="video_source?title=0&byline=0&portrait=0&color=fd735b&api=1&player_id=my_video" width="940" height="529" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
And here is how I use js API:
var iframe = $('#my_video')[0];
var player = $f(iframe);
player.addEvent('ready', function() {
$("#watch_video_wrapper").bind('click', function(){
$("html, body").animate({ scrollTop: $('#video_page').offset().top }, 3500);
player.api('play');
});
});
So when player is ready I bind 'click' event to the "Watch Video" parent container. It works on the desktops. But when I tried it on iPhone 3GS or iPad simulator video is not starting. Also I checked vimeo example on the site:
Example 1
Example 2
and they do not work on mobile devices too.
On mobile devices this API will work only after you have started video manually with play button in player. But if you load page, do not start video manually and try to play it with JS - it will not work.
Did anybody face with this problem? Or I'm doing something wrong?
I dont think its a vimeo issue - its related to IOS & Android's policies around not playing video without user interaction. See this answer : On iPhone, Vimeo Javascript API .play() function doesn't work until the video has been played
If you look right here it has a table of compatibilities. It looks like mobile with the play option is not supported.
https://developer.vimeo.com/player/js-api#function-compatibility
Vimeo only makes "mobile safe" versions of the movie if you have a "Vimeo Plus" account.
So if you don't have a plus account, the video will never be "ready" (= loaded).
I'd like to be able to click on a small thumbnail image and have a video start playing in the full size. This is similar to one using a small image that one clicks on to show the full image.
I am using this code for the video
<video src="my_movie.ogg" controls>
Your browser does not support the <code>video</code> element.
</video>
Is there a way to set this, similar to youtube, where the there is a small image and clicking on it starts the full size movie, and similar to http://www.reddit.com/r/videos/ ?
If I do
<video src="my_movie.ogg" controls width=100px height=100px>
</video>
Then the movie stays too small to see when clicking on it. It would be nice if there are an initial width and run time width to use. But there is not.
Is it possible to also open the movie in a separate pop-up window instead of a new html page? This way the original web page remains in view?
ps. it will be really nice, if the first frame of the movie is displayed as the small image to click on to run the movie, so that I do not have a to make a thumbnail image of each movie to use as the image.
The reason I want to do this, is that the space I have on the page is small and I wanted to put few movies in one row of a table, hence need the sizes to be small initially.
To Chris:
I've used your updated code. This is what happens: Using IE and Chrome, when I click on the images, nothing happens. However, when right-clicking, I see now a menu that has "PLAY" on it. When selecting this, the movie does play. But it only plays in the small size, not the large size.
When I tried my own .ogv file, converted to HTML video from mp4 using online service, the same thing happens. When I click on the image, nothing happens. When I right-click, and select PLAY, it plays. But still using the small size.
Here is the code I used. Which is your code, I just changed the name of the movie to use mine in this one so I can try firefox.
It seems HTML5 video is still not ready for prime time? How to make it work like with u-tube? Click on small image, opens the large size movie in separate window (it will be nice to have a pop-up window for this) but first it has to work in the same web page, which it does not so far.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<script>
window.onload = function() {
var videos = document.querySelectorAll(".thumbnail");
for (var i = 0; i < videos.length; i++) {
videos[i].addEventListener('click', clickHandler, false);
};
function clickHandler(el) {
var mainVideo = document.getElementById("mainVideo");
mainVideo.src = el.srcElement.currentSrc;
}
</script>
<video id="mainVideo" autoplay></video><br/>
<video class="thumbnail" width=150 height=150>
<source src="movie.ogv">
</video>
</body>
</html>
You can go about this many different ways. However, I focused on one part of your question, which was that you thought it might be nice to NOT have to make thumbnail images of each movie.
In order to get that, you have to rely on the HTML5 video tag grabbing the first frame for you. I actually don't recommend you go this route overall, but I wanted to show you how you can accomplish it.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<script>
window.onload = function() {
var videos = document.querySelectorAll(".thumbnail");
for (var i = 0; i < videos.length; i++) {
videos[i].addEventListener('click', clickHandler, false);
};
function clickHandler(el) {
var mainVideo = document.getElementById("mainVideo");
mainVideo.src = el.srcElement.currentSrc;
}
</script>
<video id="mainVideo" width=320 height=240 autoplay></video><br/>
<video class="thumbnail" width=100 height=100>
<source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4">
</video>
<video class="thumbnail" width=100 height=100>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
</body>
</html>
You can also test it out here: http://jsfiddle.net/E4uDB/
(FYI: these are mp4s so IE and Chrome work, Firefox does not)
There is work to do with this approach. For one thing, you are asking the page to load videos just to make thumbnails. This is pretty bad as the user has to download the videos just to get a feature you can accomplish server side (at processing time).
You then load the video on the fly into a waiting "main window" which might cause another download, not to mention that this sample does nothing to make sure the video is loaded (which you can do, but I think this sample demonstrated enough of the point) to avoid bad user experience.
I don't recommend this because the better approach is to create image thumbnails in some kind of processing task and link up their image click events to load and play the desired video. You get the gist of how you can direct the video element to load and play a new source from my sample, but it certainly isn't trying to be production ready code.
I would strongly consider developing a server side processing task to create image thumbnails, so you can build a better player and one that doesn't make the browser download ALL of the videos just to make image thumbnails.
Another sample: http://cellbycell.com/files/quickwebsamples/Videothumbnails/videochooser.html
Click on an image and it will open and play the desired video in a new browser window.
The trick to this is that the chooser wires a click event to the images, then it uses the id of the images to pass in a query string variable to the player page. That page picks up the query string and plays the video of your choice. View source on both pages, but some highlights are:
The chooser page:
<script>
window.onload = function() {
var videos = document.querySelectorAll(".thumbnail");
for (var i = 0; i < videos.length; i++) {
videos[i].addEventListener('click', clickHandler, false);
};
}
function clickHandler(el) {
window.open("http://cellbycell.com/files/QuickWebSamples/VideoThumbnails/VideoPlayer.html?Video=" + el.target.id);
}
</script>
Select your video<br/>
<img id="Tool" class="thumbnail" src="http://cellbycell.com/files/QuickWebSamples/VideoThumbnails/Tool.png">
<img id = "Cat" class="thumbnail" src="http://cellbycell.com/files/QuickWebSamples/VideoThumbnails/Cat.png">
The target player page:
<script>
window.onload = function() {
var videoPlayer = document.getElementById("videoPlayer");
var videoId = queryObj()["Video"];
switch(videoId)
{
case "Tool":
videoPlayer.src="http://techslides.com/demos/sample-videos/small.mp4";
break;
case "Cat":
videoPlayer.src="http://html5demos.com/assets/dizzy.mp4";
break;
}
}
function queryObj() {
var result = {}, keyValuePairs = location.search.slice(1).split('&');
keyValuePairs.forEach(function(keyValuePair) {
keyValuePair = keyValuePair.split('=');
result[keyValuePair[0]] = keyValuePair[1] || '';
});
return result;
}
</script>
Enjoy your video!<br/>
<video id="videoPlayer" autoplay controls></video>
No matter what you decide to do, you have some work ahead of you. I strongly suggest you look for some of the JavaScript video player libraries out there as well. I think it's good to stand on the shoulders of those who've been working at it already.
Start with html5 poster attribute to see if it solves your purpose. Else if you want to expand the video inline, change it's CSS. If you want to expand and play in a popup, try some video popup libs like VLightBox
I'm trying to put a YouTube video source into the HTML5 <video> tag, but it doesn't seem to work. After some Googling, I found out that HTML5 doesn't support YouTube video URLs as a source.
Can you use HTML5 to embed YouTube videos? If not, is there any workaround?
This answer does not work anymore, but I'm looking for a solution.
As of . 2015 / 02 / 24 . there is a website (youtubeinmp4) that allows you to download youtube videos in .mp4 format, you can exploit this (with some JavaScript) to get away with embedding youtube videos in <video> tags. Here is a demo of this in action.
##Pros
Fairly easy to implement.
Quite fast server response actually (it doesn't take that much to retrieve the videos).
Abstraction (the accepted solution, even if it worked properly, would only be applicable if you knew beforehand which videos you were going to play, this works for any user inputted url).
##Cons
It obviously depends on the youtubeinmp4.com servers and their way of providing a downloading link (which can be passed as a <video> source), so this answer may not be valid in the future.
You can't choose the video quality.
###JavaScript (after load)
videos = document.querySelectorAll("video");
for (var i = 0, l = videos.length; i < l; i++) {
var video = videos[i];
var src = video.src || (function () {
var sources = video.querySelectorAll("source");
for (var j = 0, sl = sources.length; j < sl; j++) {
var source = sources[j];
var type = source.type;
var isMp4 = type.indexOf("mp4") != -1;
if (isMp4) return source.src;
}
return null;
})();
if (src) {
var isYoutube = src && src.match(/(?:youtu|youtube)(?:\.com|\.be)\/([\w\W]+)/i);
if (isYoutube) {
var id = isYoutube[1].match(/watch\?v=|[\w\W]+/gi);
id = (id.length > 1) ? id.splice(1) : id;
id = id.toString();
var mp4url = "http://www.youtubeinmp4.com/redirect.php?video=";
video.src = mp4url + id;
}
}
}
###Usage (Full)
<video controls="true">
<source src="www.youtube.com/watch?v=3bGNuRtlqAQ" type="video/mp4" />
</video>
Standard video format.
###Usage (Mini)
<video src="youtu.be/MLeIBFYY6UY" controls="true"></video>
A little less common but quite smaller, using the shortened url youtu.be as the src attribute directly in the <video> tag.
I have created a realtively small (4.89 KB) javascript library for this exact functionality.
Found on my GitHub here: https://github.com/thelevicole/youtube-to-html5-loader/
It's as simple as:
<video data-yt2html5="https://www.youtube.com/watch?v=ScMzIvxBSi4"></video>
<script src="https://cdn.jsdelivr.net/gh/thelevicole/youtube-to-html5-loader#2.0.0/dist/YouTubeToHtml5.js"></script>
<script>new YouTubeToHtml5();</script>
Working example here: https://jsfiddle.net/thelevicole/5g6dbpx3/1/
What the library does is extract the video ID from the data attribute and makes a request to the https://www.youtube.com/get_video_info?video_id=. It decodes the response which includes streaming information we can use to add a source to the <video> tag.
UPDATE June 2021
YouTube have recently updated their API which has broken previous versions of this package. Please now use versions 4.0.1 and up! Updated example:
<video data-yt2html5="https://www.youtube.com/watch?v=ScMzIvxBSi4"></video>
<script src="https://cdn.jsdelivr.net/gh/thelevicole/youtube-to-html5-loader#4.0.1/dist/YouTubeToHtml5.js"></script>
<script>new YouTubeToHtml5();</script>
https://jsfiddle.net/thelevicole/5g6dbpx3/2/
The <video> tag is meant to load in a video of a supported format (which may differ by browser).
YouTube embed links are not just videos, they are typically webpages that contain logic to detect what your user supports and how they can play the youtube video, using HTML5, or flash, or some other plugin based on what is available on the users PC. This is why you are having a difficult time using the video tag with youtube videos.
YouTube does offer a developer API to embed a youtube video into your page.
I made a JSFiddle as a live example: http://jsfiddle.net/zub16fgt/
And you can read more about the YouTube API here: https://developers.google.com/youtube/iframe_api_reference#Getting_Started
The Code can also be found below
In your HTML:
<div id="player"></div>
In your Javascript:
var onPlayerReady = function(event) {
event.target.playVideo();
};
// The first argument of YT.Player is an HTML element ID.
// YouTube API will replace my <div id="player"> tag
// with an iframe containing the youtube video.
var player = new YT.Player('player', {
height: 320,
width: 400,
videoId : '6Dc1C77nra4',
events : {
'onReady' : onPlayerReady
}
});
Step 1: add &html5=True to your favorite youtube url
Step 2: Find <video/> tag in source
Step 3: Add controls="controls" to video tag: <video controls="controls"..../>
Example:
<video controls="controls" class="video-stream" x-webkit-airplay="allow" data-youtube-id="N9oxmRT2YWw" src="http://v20.lscache8.c.youtube.com/videoplayback?sparams=id%2Cexpire%2Cip%2Cipbits%2Citag%2Cratebypass%2Coc%3AU0hPRVRMVV9FSkNOOV9MRllD&itag=43&ipbits=0&signature=D2BCBE2F115E68C5FF97673F1D797F3C3E3BFB99.59252109C7D2B995A8D51A461FF9A6264879948E&sver=3&ratebypass=yes&expire=1300417200&key=yt1&ip=0.0.0.0&id=37da319914f6616c"></video>
Note there seems to some expire stuff. I don't know how long the src string will work.
Still testing myself.
Edit (July 28, 2011): Note that this video src is specific to the browser you use to retrieve the page source. I think Youtube generates this HTML dynamically (at least currently) so in testing if I copy in Firefox this works in Firefox, but not Chrome, for example.
how about doing it the way hooktube does it? they don't actually use the video URL for the html5 element, but the google video redirector url that calls upon that video. check out here's how they present some despacito random video...
<video id="player-obj" controls="" src="https://redirector.googlevideo.com/videoplayback?ratebypass=yes&mt=1510077993----SKIPPED----amp;utmg=ytap1,,hd720"><source>Your browser does not support HTML5 video.</video>
the code is for the following video page https://hooktube.com/watch?v=72UO0v5ESUo
youtube to mp3 on the other hand has turned into extremely monetized monster that returns now download.html on half of video download requests... annoying...
the 2 links in this answer are to my personal experiences with both resources. how hooktube is nice and fresh and actually helps avoid censorship and geo restrictions.. check it out, it's pretty cool. and youtubeinmp4 is a popup monster now known as ConvertInMp4...
In case anyone stumbles upon this question, a neat way to embed YouTube video is to use embed tag, like so:
<embed src="https://www.youtube-nocookie.com/embed/DelkRGZCtTs" width="100%" height="333">
The easiest answer is given by W3schools.
https://www.w3schools.com/html/html_youtube.asp
Upload your video to Youtube
Note the Video ID
Now write this code in your HTML5.
<iframe width="640" height="520"
src="https://www.youtube.com/embed/<VideoID>">
</iframe>
With the new iframe tag embedded in your website, the code will automatically detect whether you are using a browser that supports HTML5 or not.
The iframe code for embedding YouTube videos is as follows, simply copy the Video ID and replace in the code below:
<iframe type="text/html"
width="640"
height="385"
src="http://www.youtube.com/embed/VIDEO_ID"
frameborder="0">
</iframe>