Video Player in HTML5!  

Share your tips and tricks here or get help with any Panotour 2.0+ problem!
No bug reports (of any kind) in this forum!
no avatar
Eddie
Member
 
Topic author
Posts: 175
Likes: 0 post
Liked in: 1 post
Joined: Tue Dec 17, 2013 2:28 am
Info

Video Player in HTML5!

by Eddie » Mon Feb 10, 2014 12:19 am

Hello! The Video Box with YouTube player work when export to HTML5?

Thank you!

Eddie

User avatar
AlexandreJ
Kolor Team
 
Posts: 5987
Likes: 7 posts
Liked in: 10 posts
Joined: Mon Nov 14, 2005 4:56 pm
Location: Francin, France
Info

Re: Video Player in HTML5!

by AlexandreJ » Mon Feb 10, 2014 8:11 am

yes, it works in HTML5 everywhere.

no avatar
Eddie
Member
 
Topic author
Posts: 175
Likes: 0 post
Liked in: 1 post
Joined: Tue Dec 17, 2013 2:28 am
Info

Re: Video Player in HTML5!

by Eddie » Tue Feb 11, 2014 4:09 am

Thanks for answering my question! I have another: If you insert a video on a TV in the pan, also be able to see in Html5? In short, I wonder if there is any multimedia content (video, sound, etc.) that can not be displayed when exporting in html5 ..

Thank you very much!

Eddie

no avatar
benji33
Kolor Team
 
Posts: 5848
Likes: 92 posts
Liked in: 199 posts
Joined: Tue Apr 09, 2013 10:59 am
Location: France
Info

Re: Video Player in HTML5!

by benji33 » Tue Feb 11, 2014 9:28 am

Yes it's available.
Only the video size ratio is a little different due to the HTML5 video player.

For sounds, only background sound and "button/spot" with play sound action are available on HTML5 player. 3D sound doesn't exist yet on HTML5 player.
Benjamin

no avatar
Eddie
Member
 
Topic author
Posts: 175
Likes: 0 post
Liked in: 1 post
Joined: Tue Dec 17, 2013 2:28 am
Info

Re: Video Player in HTML5!

by Eddie » Tue Feb 11, 2014 4:35 pm

Thank you! What format should I use to embed a video? .mp4?
Another question! What do you recommend? Make flash export for PC and Mac, another in Html5 for tablets and phones or Export all in Html5?

Eddie

no avatar
benji33
Kolor Team
 
Posts: 5848
Likes: 92 posts
Liked in: 199 posts
Joined: Tue Apr 09, 2013 10:59 am
Location: France
Info

Re: Video Player in HTML5!

by benji33 » Tue Feb 11, 2014 5:45 pm

If you can deal with lost features of HTML5 player, you can use HTML5 only for all platforms. IE9 and less have no result.
Or make a tour with Flash + HTML5 and add a selector into the HTML file generated.

If prefer html5 for instance, add html5 line into the embed pano code.
Code: Select all
embedpano({
swf:"openAtStartdata/openAtStart.swf"
,target:"panoDIV"
,passQueryParameters:true
,wmode:"opaque"
,html5:"prefer"
});


Values are :
"prefer" for html5 and fallback to flash
"never" for flash only
"only" for html5 only
"fallback" for flash with html5 fallback
Benjamin

no avatar
Eddie
Member
 
Topic author
Posts: 175
Likes: 0 post
Liked in: 1 post
Joined: Tue Dec 17, 2013 2:28 am
Info

Re: Video Player in HTML5!

by Eddie » Wed Feb 12, 2014 5:28 am

Sorry, I know nothing about codes and my English is not very good! What you mean is that adding these lines, if the project is opened from a pc, flash project opens, and if opened from a tablet, will open the html5?

Sorry if I get it wrong!

Eddie

no avatar
benji33
Kolor Team
 
Posts: 5848
Likes: 92 posts
Liked in: 199 posts
Joined: Tue Apr 09, 2013 10:59 am
Location: France
Info

Re: Video Player in HTML5!

by benji33 » Wed Feb 12, 2014 10:21 am

On recent tablets and mobiles the HTML5 player is used.
On desktop it depends of the browser.
So to force html5 and/or flash player you have to add querystring after your url.
For instance :
http://www.kolor.com/virtual-tours/20130626-kolor-chadian-tea-shop/?html5=auto (default case : browser/player selection)
http://www.kolor.com/virtual-tours/20130626-kolor-chadian-tea-shop/?html5=prefer (html5 with flash fallback)
http://www.kolor.com/virtual-tours/20130626-kolor-chadian-tea-shop/?html5=fallback (flash with html5 fallback)
http://www.kolor.com/virtual-tours/20130626-kolor-chadian-tea-shop/?html5=never (flash only)
http://www.kolor.com/virtual-tours/20130626-kolor-chadian-tea-shop/?html5=only (html5 only)
Benjamin

no avatar
Eddie
Member
 
Topic author
Posts: 175
Likes: 0 post
Liked in: 1 post
Joined: Tue Dec 17, 2013 2:28 am
Info

Re: Video Player in HTML5!

by Eddie » Thu Feb 13, 2014 7:08 pm

Thank you very much for the help! I hope to do well! Another question: This example is made with Panotour Pro?
http://www.exposicionesmapfrearte.com/j ... rtual.html

Thank you!

Eddie

no avatar
mediavets
Moderator
 
Posts: 16415
Likes: 2 posts
Liked in: 130 posts
Joined: Wed Nov 14, 2007 2:12 pm
Location: Isleham, Cambridgeshire, UK.
Info

Re: Video Player in HTML5!

by mediavets » Thu Feb 13, 2014 7:36 pm

Eddie wrote:Thank you very much for the help! I hope to do well! Another question: This example is made with Panotour Pro?
http://www.exposicionesmapfrearte.com/j ... rtual.html

Thank you!

Eddie

No.

no avatar
Eddie
Member
 
Topic author
Posts: 175
Likes: 0 post
Liked in: 1 post
Joined: Tue Dec 17, 2013 2:28 am
Info

Re: Video Player in HTML5!

by Eddie » Sun Feb 16, 2014 7:18 am

What format should I use to embed a video? .mp4, .flv?

Thank you!

Eddie

no avatar
mediavets
Moderator
 
Posts: 16415
Likes: 2 posts
Liked in: 130 posts
Joined: Wed Nov 14, 2007 2:12 pm
Location: Isleham, Cambridgeshire, UK.
Info

Re: Video Player in HTML5!

by mediavets » Sun Feb 16, 2014 9:12 am

Eddie wrote:What format should I use to embed a video? .mp4, .flv?

Thank you!

Eddie


mp4 if you want it to work with HTML5.

User avatar
klausesser
Member
 
Posts: 8836
Likes: 5 posts
Liked in: 64 posts
Joined: Mon May 22, 2006 12:18 am
Location: Duesseldorf, Germany
Info

Re: Video Player in HTML5!

by klausesser » Sun Feb 16, 2014 1:25 pm

mediavets wrote:
Eddie wrote:What format should I use to embed a video? .mp4, .flv?

Thank you!

Eddie


mp4 if you want it to work with HTML5.



ONLY .mp4?

Klaus

no avatar
Destiny
Moderator
 
Posts: 7886
Likes: 6 posts
Liked in: 228 posts
Joined: Mon Apr 26, 2010 11:55 pm
Info

Re: Video Player in HTML5!

by Destiny » Sun Feb 16, 2014 2:13 pm

With video, you need to consider ALL platforms it might be viewed on, therefore just relying on mp4 is not appropriate.. Its not as plain sailing as some might think. There is a lot to consider for professional results.. There are also things you need to do to ensure users all over the world can view your video since there are protocols embedded into web net services which can effect the way your video is streamed.. Its those that have little idea and just shove up a video and assume its playing as well on other peoples hardware as it is on theirs..

The FLV is a great formate using the Sorenson Spark codec, and another which I have forgotten, which is excellent but not for mobile devices or the latest Android... but you can add it to the play list.

I would suggest you encode your videos stripping all trimmer and unwanted data useing mp4, ogg (ogg) and webm as well as flv.

You need to setup your source code so which ever hardware you are using the best video will be selected.. Also use a good javascript decoder so your video streams and buffers well and takes multi web protocols into consideration... Size of video is nothing to do with how your video will decode and stream, its all comes down to the player and script..

Your code might look something like this...

data-setup="{}">
<source src="#.mp4" type='video/flv' />
<source src="#.mp4" type='video/mp4' />
<source src="#.webm" type='video/webm' />
<source src="#.ogv" type='video/ogg' />
<track kind="captions" src="" srclang="en" label="English"></track>

The above is ONLY for use with a Player. If you embed video directly into the Tour you need to just use mp4.. Since YouTube and others have built in decoders with buffing and steaming, you might want to consider uploading your video and using the Video Plugin...

Destiny..

no avatar
Eddie
Member
 
Topic author
Posts: 175
Likes: 0 post
Liked in: 1 post
Joined: Tue Dec 17, 2013 2:28 am
Info

Re: Video Player in HTML5!

by Eddie » Mon Feb 24, 2014 8:13 pm

Hello! Turning to export html5 .. I'm doing one job with different interface, one for pc (flash) and another for tablets (in html5) ... I mean that I have to export for both cases separately, but want it to be a single download link! Where should I put this code so that the work is displayed correctly on every device? I want to first display flash as pc!

embedpano ({
swf "openAtStartdata / openAtStart.swf"
, target: "panoDIV"
, passQueryParameters: true
, wmode: "opaque"
, html5 "prefer"
});

I must put it on the two folders?

Sorry for not knowing anything about codes ..

Thank you!

Eddie

no avatar
benji33
Kolor Team
 
Posts: 5848
Likes: 92 posts
Liked in: 199 posts
Joined: Tue Apr 09, 2013 10:59 am
Location: France
Info

Re: Video Player in HTML5!

by benji33 » Wed Feb 26, 2014 10:50 am

Directories must be separated in your case and 2 HTML templates are generated.
For the call from the same page it's more difficult because it need script detection for mobile browsers.
Benjamin

no avatar
Eddie
Member
 
Topic author
Posts: 175
Likes: 0 post
Liked in: 1 post
Joined: Tue Dec 17, 2013 2:28 am
Info

Re: Video Player in HTML5!

by Eddie » Wed Feb 26, 2014 7:09 pm

Then? I do two exports, two separate folders, one for flash and one for html5 .. but can not join? I can not do the same interface for both .. also included the setting of the view, that also changes!

It is very important for me to solve this problem ... There is no way to put them together and you click one option detecting the corresponding device?

Eddie

no avatar
benji33
Kolor Team
 
Posts: 5848
Likes: 92 posts
Liked in: 199 posts
Joined: Tue Apr 09, 2013 10:59 am
Location: France
Info

Re: Video Player in HTML5!

by benji33 » Thu Feb 27, 2014 10:06 am

The better way is to fill an iframe into the page with the src url linked to the desktop or mobile tour after a mobile javascript test.

You can try something like that :

Code: Select all
<!DOCTYPE html>
<html>
<head>
<!--[if !IE]><!-->
<script type="text/javascript" src="indexdata/lib/jquery-2.0.3.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8]>
<script type="text/javascript" src="indexdata/lib/jquery-1.10.2.min.js"></script>
<![endif]-->
<!--[if gt IE 8]>
<script type="text/javascript" src="indexdata/lib/jquery-2.0.3.min.js"></script>
<![endif]-->
<script type="text/javascript">
      jQuery( document ).ready(function( jQuery ) {
         var iframeTag = "";
         if (/(iphone|ipod|ipad|android|iemobile|webos|fennec|blackberry|kindle|series60|playbook|opera\smini|opera\smobi|opera\stablet|symbianos|palmsource|palmos|blazer|windows\sce|windows\sphone|wp7|bolt|doris|dorothy|gobrowser|iris|maemo|minimo|netfront|semc-browser|skyfire|teashark|teleca|uzardweb|avantgo|docomo|kddi|ddipocket|polaris|eudoraweb|opwv|plink|plucker|pie|xiino|benq|playbook|bb|cricket|dell|bb10|nintendo|up.browser|playstation|tear|mib|obigo|midp|mobile|tablet)/.test(navigator.userAgent.toLowerCase())) {
            //mobile/tablet url
            iframeTag = '<iframe src="index_mobile.html" width="800" height="600" allowfullscreen></iframe>';
            jQuery("#tourSelector").html(iframeTag);
         }else{
            //desktop url
            iframeTag = '<iframe src="index_desktop.html" width="800" height="600" allowfullscreen></iframe>';
            jQuery("#tourSelector").html(iframeTag);
         }
      });
      </script>
</head>
<body>
<div id="tourSelector"></div>
</body>
</html>
Benjamin

no avatar
Eddie
Member
 
Topic author
Posts: 175
Likes: 0 post
Liked in: 1 post
Joined: Tue Dec 17, 2013 2:28 am
Info

Re: Video Player in HTML5!

by Eddie » Fri Feb 28, 2014 12:02 am

Thank you! I'll try it and see what happens!

Eddie


Who is online

Users browsing this forum: No registered users and 4 guests