HTML:5 video

Post your help queries and engine programming questions here

HTML:5 video

Postby pauloallex24 » Mon Jan 13, 2014 7:10 pm

There's any good way to implement video on a ui div?
I've one div on the HTML page but when I hide the div (or destroy it with jQuery) the screen start to be black and I need to do something that mess with the web page size (like resize the window) to that black screen become the game window.
pauloallex24
 
Posts: 26
Joined: Sat Dec 28, 2013 7:13 pm

Re: HTML:5 video

Postby stokaboka » Thu May 29, 2014 6:49 am

I showed the video on top of the game

Code: Select all
<div  style="width: 100%; height: 100%;"  >
<video  id="video" width=1024 height=668 autoplay autobuffer style="position: fixed;  top: 30px; left: 50%; margin-left: -512px;" >   
    Ваш обозреватель не поддерживает тэг "video".<br>
    Если Вы используете Safari попробуйте обновить Safari и QuickTime. 
</video>
</div>


but SRC attribute must be set to JS code depending on browser (I had to make four versions of the same video):

Code: Select all
play_video: function(__video_file){
                var browser = utils.browser();

                if(browser.browserType === "iPad") {
                    $('#video').attr('src', __video_file+"_ipad.mp4");
                }else if(browser.browserType === "Safari" || browser.browserType === "IE") {
                    $('#video').attr('src', __video_file+".mp4");
                }else if(browser.browserType === "Firefox"){
                    $('#video').attr('src', __video_file+".ogv");
                }else {
                    $('#video').attr('src', __video_file+".webm");
                };

                $('#video').load();
                $('#video').play();
}


to determine the browser type, there are different ways.
I found and use this (i use angularjs):

Code: Select all
   dialogServ.service('utils', function(){
       
        var ua = navigator.userAgent.toLowerCase();
        var check = function(r) {
            return r.test(ua);
        };
        var DOC = document;
        var isStrict = DOC.compatMode == "CSS1Compat";
        var isOpera = check(/opera/);
        var isChrome = check(/chrome/);
        var isWebKit = check(/webkit/);
        var isSafari = !isChrome && check(/safari/);
        var isSafari2 = isSafari && check(/applewebkit\/4/); // unique to
        // Safari 2
        var isSafari3 = isSafari && check(/version\/3/);
        var isSafari4 = isSafari && check(/version\/4/);
        var isIE = !isOpera && check(/msie/);
        var isIE7 = isIE && check(/msie 7/);
        var isIE8 = isIE && check(/msie 8/);
        var isIE6 = isIE && !isIE7 && !isIE8;
        var isGecko = !isWebKit && check(/gecko/);
        var isGecko2 = isGecko && check(/rv:1\.8/);
        var isGecko3 = isGecko && check(/rv:1\.9/);
        var isBorderBox = isIE && !isStrict;
        var isWindows = check(/windows|win32/);
        var isMac = check(/macintosh|mac os x/);
        var isAir = check(/adobeair/);
        var isLinux = check(/linux/);
        var isSecure = /^https/i.test(window.location.protocol);
        var isIE7InIE8 = isIE7 && DOC.documentMode == 7;
        var isiPad = check(/ipad/);
        var isMobile = check(/mobile/);

        var jsType = '', browserType = '', browserVersion = '', osName = '';
       
        var osName = '';
        var browserType = '';
        var browserVersion = '';
        var jsType = '';
       
        var browser = function(){
            if(isWindows){
                osName = 'Windows';

                if(check(/windows nt/)){
                    var start = ua.indexOf('windows nt');
                    var end = ua.indexOf(';', start);
                    osName = ua.substring(start, end);
                }
            } else {
                osName = isMac ? 'Mac' : isLinux ? 'Linux' : 'Other';
            }

            if(isIE){
                browserType = 'IE';
                jsType = 'IE';

                var versionStart = ua.indexOf('msie') + 5;
                var versionEnd = ua.indexOf(';', versionStart);
                browserVersion = ua.substring(versionStart, versionEnd);

                jsType = isIE6 ? 'IE6' : isIE7 ? 'IE7' : isIE8 ? 'IE8' : 'IE';
            } else if (isGecko){
                var isFF =  check(/firefox/);
                browserType = isFF ? 'Firefox' : 'Others';;
                jsType = isGecko2 ? 'Gecko2' : isGecko3 ? 'Gecko3' : 'Gecko';

                if(isFF){
                    var versionStart = ua.indexOf('firefox') + 8;
                    var versionEnd = ua.indexOf(' ', versionStart);
                    if(versionEnd == -1){
                        versionEnd = ua.length;
                    }
                    browserVersion = ua.substring(versionStart, versionEnd);
                }
            } else if(isChrome){
                browserType = 'Chrome';
                jsType = isWebKit ? 'Web Kit' : 'Other';

                var versionStart = ua.indexOf('chrome') + 7;
                var versionEnd = ua.indexOf(' ', versionStart);
                browserVersion = ua.substring(versionStart, versionEnd);
            }else if(isiPad){
                browserType = "iPad";
            }else{
                browserType = isOpera ? 'Opera' : isSafari ? 'Safari' : '';
            }           
        };
       
      return {
         browser: function(){
             browser();
             return {
                'osName': osName,
                'browserType': browserType,
                'browserVersion': browserVersion,
                'jsType': jsType,
                'userAgent': ua
             };
         }
                                 
      };
   });
stokaboka
 
Posts: 14
Joined: Fri Nov 08, 2013 6:13 am

Re: HTML:5 video

Postby robaldred » Sun Jun 01, 2014 2:56 pm

You can overlay anything over the IGE game because the canvas is just another dom element.

If you want to control layering, ensure that both the canvas and the div containing your video are both positioned either relative or absolute and use the z-index property.

Whilst stokaboka's answer is very detailed, you don't need to do any complicated browser detection to set sources.
Just provide them all with the source tag, the browser will pick which one it supports automatically

Code: Select all

<div id="game-holder">
  <canvas id="game" width="1280" height="720"></canvas>
</div>
<div id="video-holder">
  <video id="video" width="1280" height="720" controls autoplay>
    <source src="intro-movie.mp4" type="video/mp4">
    <source src="intro-movie.ogg" type="video/ogg">
    <source src="intro-movie.webm" type="video/webm">
    Your browser does not support the video tag.
  </video>
</div>



You can then hook into the video events like "ended"
eg. (quick and dirty)

Code: Select all
$('#video').on('ended',function() {
   $('#video_holder').hide(); # hide the video
   $('#game_holder').show(); # show the game
});


Checkout the w3c docs for details information on controls and events for the video tag
http://www.w3.org/2010/05/video/mediaevents.html
I don't work for Irrelon. All comments are my own.
I would strongly encourage anyone building production projects with Isogenic to buy a premium licence, it costs very little and will help towards continued development of the engine. Irrelon have spent thousands of hours developing this wonderful platform with many features found in AAA game engine.
User avatar
robaldred
 
Posts: 243
Joined: Wed Oct 23, 2013 8:09 pm
Location: Manchester, England

Re: HTML:5 video

Postby stokaboka » Mon Jun 02, 2014 5:25 am

robaldred wrote:you don't need to do any complicated browser detection to set sources.
Just provide them all with the source tag, the browser will pick which one it supports automatically


Yes, all right, but the attribute "SRC" in different browsers and on different platforms does not always work as expected.
in addition, this method is useful when one tag "VIDEO" played a large number of clips in different times. (mine greater than 80).

above - IMHO, I had to test your application on different platforms, and is the only way that worked as expected
add only that UI is made using angularjs (given code - carved out of "service" and "directive")
stokaboka
 
Posts: 14
Joined: Fri Nov 08, 2013 6:13 am

Re: HTML:5 video

Postby robaldred » Mon Jun 02, 2014 11:13 am

Hello,
I've never had any issues with using the method I proposed, I just added it here as an alternative.
It's always worked fine for adding cut scenes or intros to my games.

As this seems like what the poster pauloallex24 is wanting to do, I'm an advocate of keeping things simple, there's no need to overcomplicate. It just wastes time and risks broken windows.

I don't use things like angular or backbone, I build games not applications so I steer clear as I don't need data binding and they add a lot of complication and bloat I'm not interested in dealing with.

I'd be interested in seeing your implementation of an IGE game with angular integration and how that comes together :)
I don't work for Irrelon. All comments are my own.
I would strongly encourage anyone building production projects with Isogenic to buy a premium licence, it costs very little and will help towards continued development of the engine. Irrelon have spent thousands of hours developing this wonderful platform with many features found in AAA game engine.
User avatar
robaldred
 
Posts: 243
Joined: Wed Oct 23, 2013 8:09 pm
Location: Manchester, England

Re: HTML:5 video

Postby stokaboka » Mon Jun 02, 2014 1:52 pm

yes, you're right: the simpler - the better

alas, I had to do so...
half of the game - two-dimensional location with dialogue (in different styles... )

in general all ok, there are no conflicts and problems...
tested on chrome, ff, ie, safari (ipad)
stokaboka
 
Posts: 14
Joined: Fri Nov 08, 2013 6:13 am


Return to Help & Questions

Who is online

Users browsing this forum: No registered users and 1 guest
cron