I've had a scan through previous questions and can't seem to find anything about adding a YouTube video to a page and having it auto play without effecting page load speeds. Is there anyway to allow the full content of the page to carry on loading without the Video creating a bottle neck situation?
It will depend on the device and browser but on a laptop, using the HTML5 video mechanism your page will continue to load while the video starts on most OS's and browsers, without you having to do any complicated ordering.
The video is streamed, which in practice means small chunks are requested at a time, so there is no delay waiting for the full video to download. Most browsers will implement this playback in a way that does not interfere with the rest of the page download and display - e.g. in a separate thread, and even sometimes mostly in the device HW itself.
On a mobile device things are different - many mobile devices will not allow autoplay at all. They implement this restriction protect to the user from incurring excessive charges on mobile data plans.
Many mobile deices will also force the video to play full screen when it does play - this tends to be on a device by device basis. For example iPhones play videos full screen but larger iPad's will allow it inline in the web page (this is an ever changing playing field so its worth checking the status with the latest release if you are interested in a particular device).
Searching around on line I came across this little bit of javascript, and an amend to the YouTube embed code which helped.
<iframe width="854" height="480" src="" data-src="https://www.youtube.com/embed/ihhAswAsg8c?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
Notice how the src="" is empty and the url has been put inside a data-src="" instead. Then add the following javascript.
$(document).ready(function() {
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
}
}
}
window.onload = init;
});
This will then stop the iframe from automatically making lots of http requests until the rest of the page has finished loading.
Related
If you go here (link: https://yle.fi/uutiset/3-11555155) and scroll down this news article, you will see there is a rather long background video that plays as you scroll showcasing some nodes and boxes. However the initial page load is very fast and I don't see it loading a video from anywhere at all.
As I try to understand how this website is put together, I'm not able to see where the video comes from, nor do I know if it's an .mp4 or some other format. When I try to hunt it down in my network tab and monitor if it loads, I just cannot see it and there is no resource that seems to be more than a couple of hundred kilobytes.
How is this possible from a web-design standpoint? Is it some sort of a proprietary solution that stealthily streams the video as it is loaded? If I would like to build a background video that plays on scroll like this in such a performant manner, how could I do it?
Such videos that play on scroll can often be seen for example on the apple.com website, but at least there I can easily also see the original source videos and materials of how the page is put together. Here this is not the case.
I would greatly appreciate if you could answer this super basic question I have. Thank you!
I can cause an embed youtube video to begin playing automatically using "autoplay=1"
When a user views the embedded video does it count towards my views count?
I have attempted to test but had inconclusive results. Viewed embedded videos to not appear to consistently convert to views even when play is manually clicked.
My tests have been from a single machine and IP which may be the problem? Browser session does not seem to be relevant.
There's been some discussions regarding this topic. Here's a thread with some contradictory answers:
Does the views in the embed player count?
And here's an article about an official response from Youtube claiming that autoplay views does not count:
Youtube Says Autoplay Don't Count
Here's another one that claims that embedded videos with autoplay doesn't count:
How does YouTube video view count work?
(found through this SO answer)
Note 1: Note that there seems to exist "cheats" and bugs, but Youtube claims to be working to prevent it. This means that, if you're using their API in a regular way, your autoplay views probably doesn't count.
Note 2: The above note is simply Youtube's official statement. Who knows what's really going on. Some people (including you, OP) are getting mixed results.
The bottom line is, don't count on it (pun intended).
Short answer: NO
I found this official documentation on the subject (however it's regarding the Custom gadget development guidelines)
Rule of Thumb:
Any time a user initiates a playback using the native player controls, that playback should count. Using an API method to PLAY a video does not count. BUT, you can use cueVideoById and then have the user click a native built in play button and it will count.
Views will NOT be counted if:
The user initiates playback via an API method like playVideo or loadVideoById
The video autoplays via the autoplay parameter
You can try adding the attribute "enablejsapi=1" . This will increase the view count in youtube.com site
No. It was a long search, but the answer seems to be hidden here. Follow the link to check it out.
Taken from here.
https://support.google.com/youtube/answer/171780?hl=en&ref_topic=3014330
I am using a video background plugin on this site http://kimcolemanprojects.com/index.html
Its works great on all browsers, only on chrome the video doesn't show until the user clicks on the screen, which is just a white screen.
Looks like its bound to a click event but I can not work out where. I can see no events bound to this page.
Thanks for your help.
Angela
This is a strange one indeed. It only happens for me when I open your site in a background tab. There are definitely no click handlers. (See "Event Listener Breakpoints" in dev tools.) And the video element does exist and is loaded, even though it's not displaying. So I suspect it's either a bug in Chrome or a quirk in how it handles certain slow-loading pages.
One thing that seems to make it show up is to tweak the CSS in the developer tools. So try adding this to your page at the end of the body element:
<script>
$(document).ready(function() {
setTimeout(function() {
document.getElementsByTagName('video')[0].style.display = '';
}, 500);
});
</script>
That works for me when I run it in the console, so hopefully it will work in script.
Also, there are a few easy things you can do to make the page load much faster and mitigate this particular problem, even if you can't make it go away completely.
Set a dark background color. That way, when the video takes some time to load, people will be able to see the white text immediately.
Make the video MUCH smaller. It's about 21MB, which is way too big for a background. It's encoded at around 3400kb per second, which is more than you need even for HD video on the web. Try it at 1000kb or even less. Maybe 500kb. And don't include an audio track in the video file.
Save the poster image as a jpg instead of png. It's 140kb. You can get it much smaller.
Put all your scripts (except for the mobile redirect) at the bottom of the body tag. This way you can at least get the text and background color displaying without having to load your scripts.
This is my first question, so your patience is much appreciated. I am having a weird issue with safari/chrome mac users only. This works superbly in IE7, IE8, Chrome, FF and safari(windows). Trying to determine and isolate the issue related to safari/chrome browsers since they start playing the embeded video inside hidden div immediately on page-load.
My company redesigned their homepage and I built it on our site recently. I am fairly new and this was my first solo webpage with JQuery slider, HTML5 etc. (I am unable to provide the link here).
Description of the page:
I have a slider in place which is using the auto-advance.js file to
automate the rotation of images every 7 seconds.
One of the images belonging to this image list slider has a "play video"
button. Below is the image map area which calls a javascript
function on "play video" href click that "hides the image" and "displays the video div"
Javascript function:
`function doStuff() {
$('div#vid').css('display','inline');
$('img.hid').css('display','none');
}
`
Here is the hidden div with HTML5 iframe youtube embed code:
`<div style="display:none;" id="vid">
<iframe class="youtube-player" type="text/html" width="770" height="430" src="http://www.youtube.com/embed/cPoENdJx5DQ? wmode=transparent&feature=player_embedded&autoplay=1&rel=0" frameborder="0" allowfullscreen="false">
</iframe>
</div>
`
Everything works beautifully in windows but for mac users the video starts playing in the background (since the div is still hidden they hear music from the video). To fix the issue immediately I had to swtich off the autoplay option (here I edited it back to 1) on the site which has solved the issue temporarily.
I am trying to understand why chrome/safari mac browsers are autoplaying the video on pageload itself and not on href "play video" button click.
I have carried out detailed research and could only find this article on the issue : http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_27722407.html, which makes me think that maybe this could be because of some code clash possibly? And if it is then why the browsers in windows are working perfectly?
Any help is much appreciated!
I would suggest:
function vidrun(){
var span = document.createElement("span");
span.innerHTML = 'code here for video';
document.getElementById("the surrounding element's id").appendChild(span);
)
This will only add the video when you get to the time you want the video to automatically start playing instead of actually already loading the video and starting it.
All you will have to do to start the video playing when you get to that point is to call the vidrun() and done :]
I have some 3rd party Flash SWFs on my site that are up to 100KB in size. e.g. the Flash video player "JWPlayer" SWF is 98KB.
That's fine for people with Broadband, but not so good for the slow dial up bandwidth visitors. e.g at 40 kbits/s, we're talking 20 seconds to download.
The problem is that on slow connections, all the visitors are seeing is a static white screen, and so may close the page thinking it's dead. If I right click the area where the SWF is to go, an Adobe Flash Player Object is occupying the space, but the 3rd party SWF has not finished loading in yet.
I would like the website visitors to see a loading spinner GIF or something similar.
Unfortunately, none of the 3rd party SWFs have "preloader" element. And they are not open source, so I cannot add a preloader to them.
So, my question is...
Is there any way to display a loading image, prefereably a GIF animation, while the SWF is loading?
For example, is there any way to force the Adobe Flash Player to show an image while it is loading in the SWF?
I don't have any Flash coding skills, so a solution that doesn't include creating an extra SWF or a SWF within a SWF would, probably isn't best for me, but might be worth adding to the post in case other people have a similar problem.
I am using swfobject 2.2 to embed the SWFs, so a solution that takes that into account or at least doesn't break that would help.
Thanks very much for taking the time to read my post, even if you can't help.
Dave
Without knowing which 3rd party swfs you're using it could be tough, but here's a few things to think about:
One approach would be to hide the swf (or the div that the swf is inside) until it's loaded, and then reveal it once it's finished. You can have a spinner / loading image sit in it's place in the mean time. That said, what you really need is a javascript function that gets called once the load is complete. Once this happens, you can use jQuery to .show() or .hide() your spinner and swf respectively.
JWPlayer has some events that you can make use of. It looks like onReady would do the trick for you.
As for the other 3rd party swfs, I'd look around their documentation for similar javascript callbacks. I know the swfobject has an onLoad callback, as do a few other embed solutions like Swiff, assuming you can use them.
Good luck!
EDIT: The swfobject's callback might be called when the swf has successfully been embedded not necessarily loaded. Your best bet is to play around with this and see if it works - or use the 3rd party swf's callback functions wherever possible.
EDIT 2: Here's a flash loader example.
import flash.net.URLRequest;
import flash.display.Loader;
import flash.events.Event;
function startLoad() {
var mLoader:Loader = new Loader();
var mRequest:URLRequest = new URLRequest("url-to-your-swf.swf");
mLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onCompleteHandler);
mLoader.load(mRequest);
}
function onCompleteHandler(loadEvent:Event){
addChild(loadEvent.currentTarget.content);
//Here's where you specify your js function
ExternalInterface.call("flashLoaded"); // <-- where 'flashloaded' is a js function
}
startLoad();
In the end we decided to go for a mixed setup:
For users with low bandwidth, we set the flash parameter wmode to "transparent", and set the gif to be a background image (without a loading spinner these low bandwidth users think the page is doing nothing).
However, using wmode = transparent has a negative side effect in that that Flash won't use Hardware Acceleration. But for our low bandwidth users, the bitrates of e.g. our video are low enough that in most cases they don't really need Hardware Acceleration.
For high bandwidth users, we deliver e.g. higher bitrate video, and so Hardware Acceleration becomes more important. For these users we use wmode = direct, and do without a loading spinner GIF as the SWF loads quickly enough anyhow.
With the size of our SWF files and their XML files that must also be loaded, we have gone for a limit of 1 megabit bandwidth, where if users have a higher bandwidth we don't use a loading graphic, and visa versa. Other people may find other levels more suitable.
We'd prefer to be able to set the bandwidth limit a lot lower if possible, as on older PCs we could do with some Harware Acceleration of video that is 384 kbit/s, but removing the loading spinner of a user with a low bandwidth like that would mean them waiting too long with nothing happpening on the screen, and this seems worse than losing a few frames during video playback.
Here is a link to Adobe's description of the various wmodes and how different browsers handle them.
http://kb2.adobe.com/cps/127/tn_12701.html#main_BrowserSupportForWmodes
Hope this helps someone else someday.
Dave