could someone please tell me how to turn on fullscreen mode when using video tag? I am using following typescript:
var vid = <HTMLVideoElement> document.getElementById('video1');
I would like to play video in fullscreen in window.onload event.
It seems typescript does not support requestFullscreen, or other "webkitFullscreen" mode. I search other questions on stackflow, and they seem bit outdated.
You can add those to the interface:
// Add the missing definitions:
interface HTMLVideoElement{
requestFullscreen();
webkitRequestFullscreen();
}
// now the following should work
var vid = <HTMLVideoElement> document.getElementById('video1');
if (vid.requestFullscreen){
vid.requestFullscreen();
}else if (vid.webkitRequestFullscreen){
vid.webkitRequestFullscreen();
}
I tried this but does not work.
I am looking to play fullscreen video from window.onload event. If I add a button on the page and add hook up the code you mentioned, then it works. code Click Me To Go Fullscreen!
Also, IE10 does not seem to support any of these modes. Is that expected?
Opening a video in full screen requires a synchronous user interaction, i.e. the user must click on a button, and only then the click handler can request full screen mode.
Please try this then
var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
For documentation Document
Related
I've checked out the other threads about this, but couldn't really find what I'm after.
I've embedded a YouTube video in iFrame form. It's set to autoloop. Here's the parameters:
?showinfo=0&rel=0&autoplay=1&loop=1&controls=0&playlist=SeFzUzde5BM
The problem is that before the video starts, there's a black screen with a loading bar. That in itself isn't too bad, but then when the video goes to loop, it does that again! Why does it need to load itself twice? Is there anyway to have it seamlessly loop, without the loading screen breaking up each loop?
Your question seems to be answered here:
YouTube embedded video auto loop without refresh screen
However if that link becomes un-available the answer is using a Youtube Embed Api code. called player.getPlayerState() .You basically check that the video has "ended" and then run the .playVideo(); function. which starts it again immediately.
Youtube API : focused on Playback Status
I added this 'if' statement to the code provided at the top of the Youtube API page.
if (event.data === YT.PlayerState.ENDED) {
player.playVideo();
}
NOTE: As you can see you have to set it up as a separate script first instead of running it in-line in the html (it's easier to keep track of too). I suggest looking at the YouTube API linked above for extra help.
Jimmy's solution looks good. I ended up using an HTML video player, but if anyone is curious, this is the solution that was working for me when I was using the iframe.
I had to know the time of the video (15s) and set it to loop .1s before that (14.9s). Otherwise, there'd be a little "blip" effect. I used an interval to constantly check the time. If there's a way to dynamically hook into the 0.1s spot before video end, I'd recommend that, but I couldn't find that. I also use a little fade effect so the transition is smoother.
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: YOUR_ID_HERE,
playerVars: {
controls: 0,
showinfo:0,
rel:0,
},
events: {
'onReady': onPlayerReady,
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
var interval_is_stopped = false;
setInterval(function (){
var current_time = event.target.getCurrentTime();
if (current_time > 14.9 && !interval_is_stopped) {
interval_is_stopped = true;
jQuery('#player').fadeTo(400, 0.7, function(){
player.seekTo(0);
jQuery(this).fadeTo(400, 1, function(){
interval_is_stopped = false;
});
});
}
}, 10);
}
</script>
I'm trying to find an event for when an HTML video changes it's source. I'm using mediaelement.js as my skin but I couldn't find any extra events that it had.
All of my searches just turns up instructions on how to change the source, not detect if the source was changed.
I'm hoping I can just do something like
.addEventListener('sourceChange', function (e) { })
but I can't seem to find if there's an actual event.
Thanks!
You can use loadedmetadata, loadeddata as well as canplay events to find out if a source has loaded and can be played. The event contains reference to the source video element in question and from there you can check if the url has changed compared to the previous one.
Example (proof of concept)
var cUrl = v.src; // current url
v.onloadedmetadata = function() {
if (this.src !== cUrl) {
i.innerHTML = "<b>Source changed!</b>";
cUrl = this.src; // update, etc..
}
else {
i.innerHTML = "Source is playing... (changes source in 5 sec.)";
setTimeout(function() {
i.innerHTML = "Loading new source...";
v.src = "http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_30mb.mp4";
}, 5000);
}
};
<div id=i>Loading video, please wait...</div><br>
<video id=v autoplay muted controls
src="http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_50mb.mp4"></video>
Can you not use "loadeddata" event as specified here http://www.mediaelementjs.com/#api
I need to disable right-click on a hyperlink which is in a span. I need to disable only one link from the whole page. Any suggestions?
If you dont want to show the context menu on hyperlink, you can do so without doing anything to other part or even span where it exists. I tested in IE, Firefox and it works.
Link
This should work:
oncontextmenu=”return false;”
Place it on any element you want to disable right click for.
Be aware that this causes bad user experience and users can disable it very easily.
Disclaimer: not tested.
If you don't want to pollute your HTML with inline events and you care about supporting IE < 9, you can use this lovely mess:
function addEvent (el, eventType, listener) {
if (el.addEventListener) { // W3C-compliant
el.addEventListener(eventType, listener, false);
}
else {// IE-specific
el.attachEvent('on'+eventType, listener);
}
}
addEvent(document.getElementById('myLinkID'), 'contextmenu', function (e) {
if (e.preventDefault) { // W3C
e.preventDefault();
}
else { // IE
e.returnValue = false;
}
});
I have never seen one done through HTML (that does not imply it is not possible). However, JavaScript can help you here.
You can do something like:
var eventbutton = (isNS) ? myevent.which : myevent.button;
if((eventbutton==2)||(eventbutton==3)) return false;
Try this oncontextmenu="return false;"
IN MVC:
#Html.ActionLink("print page", "myprint", "print", null, new { #oncontextmenu="return false;"})
You can also use jQuery:
$(".myHyperlinks").contextmenu(function () { return false; });
I know that onload event waits for page resources to load before firing - images, stylesheets, etc.
But does this include IFrames inside the page? In other words, is it guaranteed that all the child Frames' onloads will always fire before the parent's does?
Also, please let me know if behavior varies between browsers.
No, it doesn't. If you want to do something like that, you'll need to add an onload handler for the iframe. You can do this nicely with jQuery:
<iframe src="http://digg.com"></iframe>
<script>
var count = $('iframe').length;
$(function() {
// alert('loaded'); // will show you when the regular body loads
$('iframe').load(function() {
count--;
if (count == 0)
alert('all frames loaded');
});
});
</script>
This would alert when all the frames are loaded.
See the example:
http://jsbin.com/azilo
Or plain javascript should work..
function checkIframes() {
if(!i) { i = 0; }
if(document.getElementsByTagName('iframe')[i]) {
document.getElementsByTagName('iframe')[i].onload = function () { i++; checkIframes(); }
}
else { yourFunctionInHere(); }
}
haven't really tested this, but should work... than refer to it with document.onload = function() { checkIframes(); }
I don't really like libraries like jQuery, because so far I found I can achieve more with less code, with regular javascript.
As I see on my pages, each iframe got independent onload, and top-frame onload doesn't wait for iframes to fire.
I got gif/png banners on my site that sometimes loads very slowly, so I put them into iframe and that made whole site and onload event to work faster.
I have a html page A and a link in the page which opens up page B in a new window. How to reload the page A on clicking and opening this link ?
EDIT:
I should have been more clear. Page B opens in a new window and not as a popup. The hyperlink in question has its target attribute set to _blank. Taking a clue from the answers that I got (Thanks guys !), I tried setting onclick = "window.location.reload()" and it works perfectly fine.
However I have a problem. In fact another question altogether. How to make sure that the reload of page A waits until the page opened in the new window (page B) loads ?
Something like this:
open page b
The simplest way would be to do
link
If I remember correctly that should open the window and then since the return has not been suppresed will reload load the page.
I am not exactly sure if this is what you want based on your wording, but if you want to reload the opening window from a link in the popup try
self.opener.location.href = self.opener.location.href;
Edit, based on your new comments just use the code above in the body onload of the new window
<body onload="self.opener.location.href = self.opener.location.href;">
You can use setTimeout() to delay the reload.
Try this:
<script type="text/javascript">
function openPage(elem) {
function reloadCurrentPage() {
location.reload();
}
var page = window.open(elem.href, '_blank');
page.onload = function() {
reloadCurrentPage();
}
if (/MSIE/.test(navigator.userAgent)) { // fix for IE
var timer = setInterval(function() {
if (page.document.readyState == 'complete') {
clearInterval(timer);
reloadCurrentPage();
}
}, 100);
}
}
</script>
<p>second.html</p>