I have developed a little system/series of videos (3 to be exact) in an iFrame. When the main index page is loaded, and after the user clicks the "play" button on the video (which is in that iFrame), that video plays, then it redirects to another video (in another .html file) that autoplays, and then when that is over, it redirects to another video that autoplays--then everything's done. Clunky, I know, but that's what needs to be done.
Here's my issue: I want the user to be able to fullscreen the first video (if they so desire) and retain that fullscreen "status" throughout the transition between videos.
For webkit browsers, fullscreen "mode" for the videos in that iFrame works. I'm using this snippet of code in my iFrame to do so:
allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true">
So fullscreen mode does work, it just won't retain that fullscreen status when the video switches to the next. That makes sense.
I'm looking for way to detect that the user is viewing the video fullscreen and then automatically set the next video in the series to fullscreen when it is loaded.
Below is what the markup for each "video page" (that goes in the iFrame) looks like. The only difference between on video2.html and video3.html is that they have autostart:true below the width attribute.
<html>
<head>
<script src="http://jwpsrv.com/library/5Tx9ZN23EeKCNxIxOQulpA.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="videobox">
<div id="container">This'll be the player</div>
<script type="text/javascript">
jwplayer("container").setup({
file:"video/open-title-final.mp4",
height:480,
width:640,
events:{
onComplete: function() {
window.location = "video2.html";
}
},
});
</script>
</div><!-- /videobox -->
</body>
</html>
So again, I'm looking for a way to detect that a user has activated fullscreen mode, so that the next video in the series can be automatically set to activate fullscreen mode at the start. Is this possible?
Thanks in advance.
Not sure why you can't just use a playlist to queue the video's up, but i'll just trust that you have your reason for this exact implementation method and just tel you that i believe you will find there is an ònfullscreen`callback in JWPlayer, along with other fullscreen related checking methods for you to use.
See here: http://www.longtailvideo.com/support/jw-player/28851/javascript-api-reference/ and look under the resize heading around halfway down the page (or just search for onfullscreen on that page)
Related
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.
Is there a way to turn on autoplay for an embeded theta360 image?
I can see the autoplay feature is turned on https://theta360.com/en/gallery/ but not when embedding the image somewhere:
<blockquote data-width="500" data-height="375" class="ricoh-theta-spherical-image">Spherical Image - RICOH THETA</blockquote>
<script async src="https://theta360.com/widgets.js" charset="utf-8"></script>
Also on mobile, if I long tap for a second, I see that autoplay starts, but can't see how to automatically turn it on when it loads.
I've noticed that how you upload from the Theta app determines whether it auto rotates or not when embedding:
"Share without specifying the orientation" = auto rotation
"Share with the current orientation" = fixed to chosen direction always
There is no variable to set it to rotate or not (that I've found).
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 have a self-refreshing, hidden iframe included in every page on my website. Each time it refreshes, it checks a database for any new alerts (the website is coded with classic ASP). If the iframe loads and finds a new alert, it will have an embed tag that plays an mp3 notification sound.
My problem is that when the iframe loads with the embed tag, the cursor will lose focus on any text field if the user was typing at the time.
This doesn't appear to be an issue in Safari, FireFox, or Chrome... Only IE, and I'm running IE 9. This is the first time I've dared to add audio to this website... If I can at least have this working with the most recent versions of all the mentioned browsers, I'd be happy.
Here's my embed tag:
<embed hidden="true" autoplay="true" src="/AllInclude/Sounds/Notification_1.mp3" height="0px" style="overflow:hidden"></embed>
Here's my code which includes the iframe:
<iframe src="/AllInclude/AlertChecker.asp" style="overflow:hidden;height:0px;position:absolute;top:-1000px" frameborder="no"></iframe>
Here's what my iframe uses to refresh itself:
<script type="text/javascript">
setTimeout ('ReloadPage()', 15000 );
function ReloadPage() {
window.location = window.location;
}
</script>
Thanks!
Update:
I was able to get a working version of the html5 audio tag in place of the embed tag... However, since the audio tag is html5, I would need to add the "DOCTYPE html" tag in every page for this to work on IE. This tag causes huge compatibility issues for my old ASP website... so unfortunately, html5 is not an option.
You could use:
An iframe instead of an audio or embed tag
<iframe id="iframe" src="blank.html" disable="disabled" style="position:absolute;top:-10px;></iframe>
<!--You will need to save a blank html file as blank.html"/-->
<script type="text/javascript'>
/*
add the condition for audio to load
*/
document.getElementById("iframe").src="AllInclude/Sounds/Notification_1.mp3"
</script>
I would suggest however combining it with other options, listed above though...
Alright, well, after finding no good solutions to this issue, I decided to give Adobe Flash a chance, and it seems to be the best option right now. It's not pretty and not the way I'd like to make this work, but it works (and most people have flash installed).
Anyways, here's where I found a free flash audio player that has the capability of starting automatically:
http://wpaudioplayer.com/standalone/
And here's what my code looks like (it only implements the flash player for IE since the embed tag works just fine on other browsers):
<%
BrowserType = lcase(Request.ServerVariables("HTTP_USER_AGENT"))
if onload <> "" AND InStr(BrowserType,"msie") > 0 then
%>
<script type="text/javascript" src="/AllInclude/JS/audio-player.js"></script>
<script type="text/javascript">AudioPlayer.setup("/AllInclude/Flash/player.swf", {width: 290, autostart: "yes"});</script>
<p id="audioplayer_1">Alternative content</p>
<script type="text/javascript">AudioPlayer.embed("audioplayer_1", {soundFile: "/AllInclude/Sounds/Notification_1.mp3"});</script>
<% elseif onload <> "" then %>
<embed hidden="true" autoplay="true" src="/AllInclude/Sounds/Notification_1.mp3" height="0px" style="overflow:hidden;"></embed>
<% end if %>
As it takes time for the video player to load the mp4 video, does HTML5 support playing a "loading" logo when loading the video ?
Since my asp.net apps is a mobile page, it needs the user to click on the video to play the video (android, iphone not support autoplay). So, I cannot make a "loading" logo as poster, otherwise, the user will be confused about it. I want to display a loading logo when user click play button on iPad.
thanks
Joe
It took me a way too long to actually figure out how to do this, but I'm going to share it here because I FINALLY found a way! Which is ridiculous when you think about it, because loading is something that all videos have to do. You'd think they would have taken this into account when creating the html5 video standard.
My original theory that I thought should have worked (but wouldn't) was this
Add loading bg image to video when loading via js and css
Remove when ready to play
Simple, right? The problem was that I couldn't get the background image to show when the source elements were set, or the video.src attribute was set. The final stroke of genius/luck was to find out (through experimentation) that the background-image will not disappear if the poster is set to something. I'm using a fake poster image, but I imagine it would work as well with a transparent 1x1 image (but why worry about having another image). So this makes this probably a kind of hack, but it works and I don't have to add extra markup to my code, which means it will work across all my projects using html5 video.
HTML
<video controls="" poster="data:image/gif,AAAA">
<source src="yourvid.mp4"
</video>
CSS (loading class applied to video with JS)
video.loading {
background: black url(/images/loader.gif) center center no-repeat;
}
JS
$('#video_id').on('loadstart', function (event) {
$(this).addClass('loading');
});
$('#video_id').on('canplay', function (event) {
$(this).removeClass('loading');
$(this).attr('poster', '');
});
This works perfectly for me but only tested in chrome and safari on mac. Let me know if anyone finds bugs and or improvements!
Also a simple solution to add a preloader image while loading the video:
HTML:
<video class="bg_vid" autoplay loop poster="images/FFFFFF-0.png">
the poster is a transparent image 1px.
CSS:
video {
background-image: url(images/preload_30x30.gif);
background-repeat: no-repeat;
background-size: 30px 30px;
background-position: center;
}
Use the tag id poster
<video controls="controls" poster="/IMG_LOCATION/IMAGENAME">
More info can be found http://www.w3schools.com/html5/att_video_poster.asp
You could probably do it with JavaScript by creating an image overlay with an animated "loading" gif which you only display when the video is loading and is not ready to play.
You'd have to write JavaScript to link up with the Media API for detecting when the video is ready to play and so forth though (so you could hide the image again), but it should be possible.
My solution was to add the following inside of the window.fbAsyncInit = function():
var finished_rendering = function() {
var el = document.querySelector('div#loading_msg');
el.style.display="none";
}
FB.Event.subscribe('xfbml.render', finished_rendering);
Found: https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/v2.12
Personally I think the most elegant way to do this is by using some code like this,
<video src="myVideo.fileExtension" onplaying="hideControls(this)" onwaiting="showControls(this)" preload="auto" poster="myAnimatedWebpOrGifThatSaysVideoIsNotYetReady.fileExtension">No video support?</video>
<script type="text/javascript">
//We hide the video control buttons and the playhead when the video is playing (and enjoyed by the viewer)
function hideControls(event){ event.controls=false; }
//If the video has to pause and wait for data from the server we let controls be seen if the user hovers or taps on the video. As a bonus this also makes the built-in loading animation of the browser appear e.g. the rotating circular shape and we give it a little delay (like 1 sec) because we don't want the controls to blink and the delayed show-up actually looks nicer.
function showControls(event){ setTimeout(function(){ event.controls=true; },1000); }
</script>
To make it even better you could use ontimeupdate instead of onplaying which would fire continuously.
As for the delay time actually not 1 but 4 seconds -to me- is the best.