Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

HTML 5 problem fullscreen and controls.

D

Darksteel

macrumors newbie
Original poster
Apr 19, 2013
8
0
Hi guys, i have a question a build a html5 video 3 divs on horizontal, with mouseover.

If you can see if you move the mouse to the right or left appears diferent videos, i want to do the same process but when i fullscreen a video, i can do the same process, moving video to video with mouveover.

Where is my code:

<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!--><html class=""><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Video_proba</title>
<link href="script/boilerplate.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="elastic.css" type="text/css">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="script/display.js"></script>
<style type="text/css">
<!--
html{background-color: #000;}
body{
background-color: #000;
}
#video1 {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:2;
visibility: hidden;
}
#video2 {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:1;
overflow: visible;
visibility: visible;
}
#video3 {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:3;
visibility: hidden;
}
#left {
position: absolute;
left: 2px;
top: -1px;
width: 5%;
height: 100%;
z-index: 30;
visibility: visible;
background-image: url(bg.gif);
background-repeat: no-repeat;
}
#right {
position: absolute;
left: 95%;
top: 1px;
width: 8%;
height: 100%;
z-index: 20;
visibility: visible;
background-image: url(bg.gif);
background-repeat: repeat;
}
#center_vd {
position: absolute;
left: 45%;
top: 0;
height: 100%;
z-index: 50;
width: 10%;
visibility: visible;
background-image: url(bg.gif);
background-repeat: repeat;
}

-->
</style>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body >

<div id="left" onMouseOver="MM_showHideLayers('video1','','show','video2','','hide','video3','','hide')">
</div>
<div id="right" onMouseOver="MM_showHideLayers('video1','','hide','video2','','hide','video3','','show')">
</div>
<div id="center_vd" onMouseOver="MM_showHideLayers('video1','','hide','video2','','show','video3','','hide')">
</div>
<div class="gridContainer clearfix">
<div id="LayoutDiv1">

<div id="video1">
<video loop autoplay align="center" controls muted width="100%" height="100%">
<source src="2.mp4" type='video/mp4'>
<source src="2.ogg" type="video/ogg">
<source src="2.webm" type="video/webm">
<p>Infelizmente Seu Navegador Não suporta Vídeos na Tecnologia HTML5</p>
</video></div>
<!---->
<div id="video2">
<video loop autoplay align="center" controls width="100%" height="100%">
<source src="1.mp4" type='video/mp4'>
<source src="1.ogg" type="video/ogg">
<source src="1.webm" type="video/webm">
<p>Infelizmente Seu Navegador Não suporta Vídeos na Tecnologia HTML5</p>
</video></div>
<!---->
<div id="video3">
<video loop autoplay align="center" controls muted width="100%" height="100%">
<source src="3.mp4" type='video/mp4'>
<source src="3.ogg" type="video/ogg">
<source src="3.webm" type="video/webm">
<p>Infelizmente Seu Navegador Não suporta Vídeos na Tecnologia HTML5</p>
</video></div>
<!---->

</div>
</div>
</body>
</html>
 
SrWebDeveloper

SrWebDeveloper

macrumors 68000
Dec 7, 2007
1,871
3
Alexandria, VA, USA
Fullscreen video is natively controlled by the browser, and not all browsers handle this the same way. Some simply resize the browser window, some use the OS to display the video in that mode, some include controls, allow CSS interaction, others limit interactivity and event triggers to intentionally prevent developers from forcing full screen mode on users much like JS popup annoyance, etc. Don't use Flash either, it's not widely supported on mobile devices and is slowly losing favor by developers.

What follows is guru level advice, i.e. you're expected to know CSS, working with selectors, good Javascript know how, general API technique and how to read docs for APIs, usage of callback functions and event triggers:

If you want legitimate cross browser support and custom functionality in fullscreen mode I suggest VideoJS which has an API to enter/exit fullscreen mode including a callback that is fired when the mode changes plus other screen size and event triggers to help you design your interface.

One strategy might be to do a fullscreen background video but have controls in the foreground such as this guy did with VideoJS.

Another might be resize the browser window to full size and split output into two div's -- one large one to hold the video which is sized to match, another small one just underneath for your own controls to swap videos or whatever functionality you need to interact with the videos. You'll use VideoJS API commands to make it work right, interacting with each div and checking for events/triggers.

Read the API docs, explore the possibilities.
 
D

Darksteel

macrumors newbie
Original poster
Apr 19, 2013
8
0
SrWebDeveloper said:
Fullscreen video is natively controlled by the browser, and not all browsers handle this the same way. Some simply resize the browser window, some use the OS to display the video in that mode, some include controls, allow CSS interaction, others limit interactivity and event triggers to intentionally prevent developers from forcing full screen mode on users much like JS popup annoyance, etc. Don't use Flash either, it's not widely supported on mobile devices and is slowly losing favor by developers.

What follows is guru level advice, i.e. you're expected to know CSS, working with selectors, good Javascript know how, general API technique and how to read docs for APIs, usage of callback functions and event triggers:

If you want legitimate cross browser support and custom functionality in fullscreen mode I suggest VideoJS which has an API to enter/exit fullscreen mode including a callback that is fired when the mode changes plus other screen size and event triggers to help you design your interface.

One strategy might be to do a fullscreen background video but have controls in the foreground such as this guy did with VideoJS.

Another might be resize the browser window to full size and split output into two div's -- one large one to hold the video which is sized to match, another small one just underneath for your own controls to swap videos or whatever functionality you need to interact with the videos. You'll use VideoJS API commands to make it work right, interacting with each div and checking for events/triggers.

Read the API docs, explore the possibilities.
Click to expand...

I know its trickyy, if i press on brother F11 it will go fullscreen and in there works.

Another thing, its possible to have 1 html5 video control, to control all 3 videos?

Example: if i pause a video, all videos stop.
 
SrWebDeveloper

SrWebDeveloper

macrumors 68000
Dec 7, 2007
1,871
3
Alexandria, VA, USA
For that check out: http://www.pickleplayer.com/

Look at their multiple player example. BTW, not sure you really meant you wanted to have multiple videos playing at the same time (simultaneously) - users would go crazy. I am hoping you meant multiple videos on the screen but only one playing.

Pickleplayer is really a finished product using its own API with sensible controls, VideoJS is a framework to create your own video environment from scratch which allows you, the developer, complete control of all elements through API code for full customization.

You've been given tons of advice, the rest is up to you.
 
Last edited:
D

Darksteel

macrumors newbie
Original poster
Apr 19, 2013
8
0
SrWebDeveloper said:
For that check out: http://www.pickleplayer.com/

Look at their multiple player example. BTW, not sure you really meant you wanted to have multiple videos playing at the same time (simultaneously) - users would go crazy. I am hoping you meant multiple videos on the screen but only one playing.

Pickleplayer is really a finished product using its own API with sensible controls, VideoJS is a framework to create your own video environment from scratch which allows you, the developer, complete control of all elements through API code for full customization.

You've been given tons of advice, the rest is up to you.
Click to expand...
The video start all together at the same time,they have all the same time.
the middle movie explain the other 2 movies on the horizontal, so i need 1 player to control all 3 at the same time.

The other 2 movie need to be on muted.
 
SrWebDeveloper

SrWebDeveloper

macrumors 68000
Dec 7, 2007
1,871
3
Alexandria, VA, USA
Asked and answered, all possibilites, including giving you no less than two helpful links to two APIs - one does the work for you, the other so you can customize to do what you just told me, again. Have you tried either?

What exactly do you want from us here beyond the help that has been given?

I've done all I can do, I pass the baton to others who might be able to help you better.
 
D

Darksteel

macrumors newbie
Original poster
Apr 19, 2013
8
0
Problems with my code, please cheak

Hello, im having problem with my html5 code, this code reads 3 html5 video at the same time, the problem is in chrome the videos works perfect, but i firefox/internet explorer/opera, my videos doesnt work well.


The videos are very slow, its looks like CPU is 100%, but it is not, i dont know whats wrong, why my videos doesnt work fine like on chrome.
Why on IE10 and firefox the videos are very slow, but not on chrome.
Please check
Here is my program:

<!doctype html>

<!-- chamada condicional para browsers -->
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!--><html class=""><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Video_proba</title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- carrega ficheiros java e css on load -->
<script src="src/mediagroup.js"></script>
<style type="text/css">
<!-- define cor de fundo da janela
definição de posição de videos em x,y e z tamanhos dos mesmos 100% full
define areas de mouse ouver na esquerda, direita e central -->
html{background-color: #000;}
body{
background-color: #000;
}
<!--
#video1 {
text-align:center;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:2;
visibility: hidden;
}
#video2 {
text-align:center;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:1;
overflow: visible;
visibility: visible;
}
#video3 {
text-align:center;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:3;
visibility: hidden;
}
-->
#left {
position: absolute;
left: 2px;
top: -1px;
width: 5%;
height: 90%;
z-index: 30;
visibility: visible;
background-image: url(bg.gif);
background-repeat: no-repeat;
}
#right {
position: absolute;
left: 90%;
top: 1px;
width: 8%;
height: 90%;
z-index: 20;
visibility: visible;
background-image: url(bg.gif);
background-repeat: repeat;
}
#center_vd {
position: absolute;
left: 45%;
top: 0;
height: 90%;
z-index: 50;
width: 10%;
visibility: visible;
background-image: url(bg.gif);
background-repeat: repeat;
}

</style> <!-- funções JavaScript de controlo dos videos "aparece/desaparece" com atributos defenidos nos ID=elements -->
<script type="text/javascript">
<!--
document.documentElement.style.overflow = 'hidden';
document.body.scroll = "no";
function MM_swapImgRestore() { //
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //carrega os videos e atribui um index
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

function MM_findObj(n, d) { //identifica o objecto e executa a função
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //identifica a ação e troca a ordem do objecto "video"
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_showHideLayers() { //mostra ou esconde o objecto em função da selecção do ID=elemento
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body >
<!-- Declaração dos DIVs no HTML e processo a realizar no onmouseouver de cada um -->
<div id="left" onMouseOver="MM_showHideLayers('video1','','show','video2','','hide','video3','','hide')">
</div>
<div id="right" onMouseOver="MM_showHideLayers('video1','','hide','video2','','hide','video3','','show')">
</div>
<div id="center_vd" onMouseOver="MM_showHideLayers('video1','','hide','video2','','show','video3','','hide')">
</div>
<div class="gridContainer clearfix">
<div id="LayoutDiv1">


<!-- Declaração dos videos no Html com várias sources para tipos de browser a conter no MediaGroup, definir Master e Slaves -->

<div id="video2">
<video class="controller" controls mediagroup="00P1CH2C40" width="100%" height="100%"> <!-- declarar video pai "Master" no MediaGroup -->
<source src="media/1.mp4" type='video/mp4'>

<p>Infelizmente Seu Navegador Não suporta Vídeos na Tecnologia HTML5</p>
</video></div>

<div id="video1">
<video mediagroup="00P1CH2C40" width="100%" height="100%"> <!-- declarar video pai "Slave" no MediaGroup -->
<source src="media/2.mp4" type='video/mp4'>

<p>Infelizmente Seu Navegador Não suporta Vídeos na Tecnologia HTML5</p>
</video></div>
<!---->
<!---->
<div id="video3">
<video mediagroup="00P1CH2C40" width="100%" height="100%"> <!-- declarar video pai "Slave" no MediaGroup -->
<source src="media/3.mp4" type='video/mp4'>

<p>Infelizmente Seu Navegador Não suporta Vídeos na Tecnologia HTML5</p>
</video></div>
<!---->

</div>
</div>
</body>
</html>
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom