Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Apr 19, 2013, 07:49 AM   #1
Darksteel
macrumors newbie
 
Join Date: Apr 2013
HTML 5 problem fullscreen and controls.

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[i])&&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[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

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[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].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[i]))!=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[i]))!=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>
Darksteel is offline   0 Reply With Quote
Old Apr 19, 2013, 11:47 PM   #2
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: 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.
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old Apr 20, 2013, 05:12 AM   #3
Darksteel
Thread Starter
macrumors newbie
 
Join Date: Apr 2013
Quote:
Originally Posted by SrWebDeveloper View Post
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.
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.
Darksteel is offline   0 Reply With Quote
Old Apr 20, 2013, 03:43 PM   #4
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: 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.
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com

Last edited by SrWebDeveloper; Apr 20, 2013 at 03:49 PM.
SrWebDeveloper is offline   0 Reply With Quote
Old Apr 21, 2013, 05:55 AM   #5
Darksteel
Thread Starter
macrumors newbie
 
Join Date: Apr 2013
Quote:
Originally Posted by SrWebDeveloper View Post
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.
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.
Darksteel is offline   0 Reply With Quote
Old Apr 22, 2013, 03:56 AM   #6
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: 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.
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old Jun 23, 2013, 04:47 PM   #7
Darksteel
Thread Starter
macrumors newbie
 
Join Date: Apr 2013
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[i])&&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[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

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[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].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[i]))!=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[i]))!=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>
Darksteel is offline   0 Reply With Quote
Old Jun 24, 2013, 07:54 AM   #8
Darksteel
Thread Starter
macrumors newbie
 
Join Date: Apr 2013
I think my mediagroup its the problem here, how can i fix it
Darksteel is offline   0 Reply With Quote
Old Jun 25, 2013, 02:50 PM   #9
Darksteel
Thread Starter
macrumors newbie
 
Join Date: Apr 2013
Quote:
Originally Posted by Darksteel View Post
I think my mediagroup its the problem here, how can i fix it
Mediagroup.js

http://pastebin.com/dJz2BQNA
Darksteel is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
Hide controls in fullscreen iTunes visualizer? anarchopath OS X 3 Jun 2, 2014 03:49 AM
youtube fullscreen problem terra Mac Basics and Help 1 May 12, 2014 12:49 AM
Problem with the fullscreen setting in Mountain lion alfredo1985 OS X 10.8 Mountain Lion 16 May 5, 2013 07:16 AM
html problem terra Mac Basics and Help 5 Feb 23, 2013 03:21 AM
iOS 6 HTML signature problem jhable iOS 6 0 Jan 8, 2013 01:13 PM

Forum Jump

All times are GMT -5. The time now is 09:46 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC