I have an html page, and a link to the video in my code. Can I start buffering the video as soon as I've opened page, and show the 'play' button only when the video is completely buffered? Important, thet I should put this video dynamicly via innerHTML() when it's loaded. Before that, the video tag shouldn't be on the page at all.
For solution I have used video.js jquery plugin.
Related
Join function works when click on join button but not working on loading page my code for the click button is
$(document).ready(function(){
setTimeout(function() {
$( "#join" ).trigger( "click" );
}, 5000);
});
The reason for your issue is rooted in how most browsers are now handling video elements auto play functionality. (chrome, Firefox,safari).
TLDR; The browsers will block auto play on any videos that have sound enabled unless the user interacts with the page via click. For this reason it works when you have joinChannel via click, it meets the criteria for a user initiated interaction with the page and so the browser allows the video to play.
This is the recommended behavior, as it ensures the user is ready to view the content. Take a look at Google Hangouts/Meet for a commercial product that implements this logic
There is another option, which is technically possible (but not recommended). You could start the video with the audio muted. The reason this isn't recommended is there is no telling if in the future browsers will block auto play functionality all together so this could break again.
I'm building a navigation app for Windows 8 using Html & JS. For some of my div's, I am handling the onclick to do the following code, WinJS.Navigation.navigate("/pages/video/video.html"), which is a video page that simply plays a video. Before that code is called, I'm setting a hidden input element in default.html , <input id="currentVideoId" type="hidden" /> with the value of the video id that is clicked.
That way, on my video page, I can grab the current value of the hidden input to figure out which video to ajax load for the user.
Question: how can I instead navigate the user to /pages/video/video.html?id=555 ? I tried that, but my video.html did not seem to load at all. If I can do that, then in my video.js file I can look for the query string var to get the id of the video it should play.
Issue: if I don't do this, then if I go from 1 video to another video (I have an "Up next" control on each video page pointing to the next video in sequence), the back button doesn't work correctly as it just goes to the last video played.
You can use the same navigate function with the second parameter:
WinJS.Navigation.navigate("/pages/video/video.html", videoId);
I am using the following line of code to embed a YouTube player onto a new webpage. I've got over 200 videos online from 50 or so different performers. I'd like to create a page with all of the performers listed and then when you click on that performer's name their playlist will pop into a solo YouTube player. I can't seem to find a way to exchange the list=PLplaylist_ID to a variable that can be passed when the viewer clicks on a particular name. I need to use the tag due to the flash-not-playing-on-iPad-issue :)
iframe id="ytplayer" type="text/html" width="853" height="480"
src="http://www.youtube.com/embed/?listType=playlist&list=PLplaylist_ID&modestbranding=1&rel=0&autohide=1"
frameborder="0" />
Any help would be appreciated!
Ron
iframe never will play video for you.
It is just HTML container. What u need is launch html page inside iframe with YouTube player code inside.
For that You can try native Video TAG with fallback to flash (long way, reinvent bicycle ) or you can try to load in iframe : http://flowplayer.org. or http://videojs.com/
I'm using colorbox to load an external page in an iframe. As the page is loading you can see the loading GIF. All is good so far :)
Once the page is loaded, there is a form with a submit button. When I click the button, it loads a second page in to the same iframe. This all works fine, except it doesn't show the loading GIF while the second external page is loading.
Is there a way I can get this to show when I click the submit button, then once the page has loaded hide it again?
The reason for the difference in the behavior is this: the first load of the iframe is accomplished by ColorBox, which includes code to display the spinner. The second event is triggered by (I assume) your submit button so the ColorBox plugin isn't called.
This isn't strictly a ColorBox question, BTW, but I suggest you study the plug-in's code to see if you can reuse the technique that displays the spinner. Just a thought.
In any case, you'll likely need some javascript to handle the spinner display and event timings.
I have jquerytools tabs on my page, and one of the panes is displaying a video using jwplayer.
The video will not appear, nor will the preview graphic, in any browser (actually, IE9 shows the preview img but nothing else.)
When I take the jwplayer code out of the jquerytools panes, it loads and displays properly, so it's not the jwplayer syntax.
I've also tried swapping jwplayer in favor of videojs, with the exact same result.
Any ideas?