You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

1

Tuesday, June 16th 2015, 9:37am

Video width distorted

I'm having trouble with my video's width -- it seems to be stretched too wide (or squeezed too short) -- whichever the case may be, it does not match the raw video source.

http://jakesiemer.com/projects/pano/Beach_Scene.mp4


vs.

http://jakesiemer.com/projects/pano/


If I can figure out how to get this working I am ready to pay for a license for my company.

Thanks!

This post has been edited 1 times, last edit by "JakeSiemer" (Jun 19th 2015, 5:02am)


2

Tuesday, June 16th 2015, 2:01pm

Hi,

you want to play the video as flat element fitted fully inside the window frame, right?

In this case it wouldn't be necessary to define the video as pano.

Here a simpler solution - try this xml instead of your current one:

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<krpano version="1.18" bgcolor="0x000000">

    <plugin name="video"
            url.flash="%SWFPATH%/plugins/videoplayer.swf"
            url.html5="%SWFPATH%/plugins/videoplayer.js"

            posterurl.ios="video-1024x512-poster.jpg"
            videourl.ios="Beach_Scene.mp4|Beach_Scene.webm|Beach_Scene.ogv"
            posterurl.no-ios="video-1920x960-poster.jpg"
            videourl.no-ios="Lunch_Scene.mp4|Lunch_Scene.webm|Lunch_Scene.ogv"

            align="center"
            loop="true"
            onvideoready="fit_video_image();"
            />

    <events name="video_fitting"
            onresize="fit_video_image();"
            />

    <action name="fit_video_image">
        div(video_aspectratio, layer[video].videowidth, layer[video].videoheight);
        div(screen_aspectratio, area.pixelwidth, area.pixelheight);
    
        if(video_aspectratio GT screen_aspectratio,
            set(layer[video].width, 100%);
            set(layer[video].height, prop);
          ,
            set(layer[video].width, prop);
            set(layer[video].height, 100%);
          );
    </action>

</krpano>


Best regards,
Klaus

3

Wednesday, June 17th 2015, 1:04am

That would definitely work, however, I need it to leverage the pano plugin because thats the only configuration that bypasses the video limitations on iOS (playing video inline instead of fullscreen). Is there a way to have the pano plugin display the video flat and in original aspect ratio?

4

Wednesday, June 17th 2015, 8:07am

Hi,

that would be possible too:

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<krpano version="1.18" bgcolor="0x000000">

    <plugin name="video"
            url.flash="%SWFPATH%/plugins/videoplayer.swf"
            url.html5="%SWFPATH%/plugins/videoplayer.js"

            posterurl.ios="video-1024x512-poster.jpg"
            videourl.ios="Lunch_Scene.mp4|Lunch_Scene.webm|Lunch_Scene.ogv"
            posterurl.no-ios="video-1920x960-poster.jpg"
            videourl.no-ios="Lunch_Scene.mp4|Lunch_Scene.webm|Lunch_Scene.ogv"

            align="center"
            loop="true"
            onvideoready="set(image.hfov,1); set(image.vfov,0); updateobject(true,true); fit_video_image();"
            />

    <image>
        <sphere url="plugin:video" />
    </image>

    <view fovtype="HFOV" fov="1.0" fovmin="0" fovmax="1.0" limitview="fullrange" />
    <control mousefovchange="0" touchzoom="false" />

    <events name="video_fitting"
            onresize="fit_video_image();"
            />

    <action name="fit_video_image">
        div(video_aspectratio, plugin[video].videowidth, plugin[video].videoheight);
        div(screen_aspectratio, area.pixelwidth, area.pixelheight);
    
        if(video_aspectratio GT screen_aspectratio,
            set(view.fovtype, HFOV);
          ,
            set(view.fovtype, VFOV);
          );

        set(view.fov, 1);
    </action>

</krpano>


Best regards,
Klaus

5

Thursday, June 18th 2015, 1:54am

Klaus,

This is so close, however, the video is still not displaying at the correct aspect ratio -- if you compare the source video to the test page you'll see that it's the not the same.

http://jakesiemer.com/projects/pano/Beach_Scene.mp4
vs.
http://jakesiemer.com/projects/pano/


Any other ideas?

Posts: 1,850

Occupation: Virtual Tours - Photography - Krpano developer

  • Send private message

6

Thursday, June 18th 2015, 5:24am

That was weird. The first load was perfect.. and a refresh and subsequent refreshes are expanded.
KRPano Developer: Portfolio ::Gigapixel Tagging Solutions - Porfolio 2 :: Facebook :: Twitter :: reddit.com/r/VirtualTour

7

Thursday, June 18th 2015, 8:09am

Hi,

the reason is your poster image - it has a different size (1920x960) and also a different image content.

The size for the video will be taken either from the poster image or from the video itself - depending on what will get loaded first.

That means - either use a correct poster image or just remove it (the posterurl) from the xml.

Best regards,
Klaus

8

Friday, June 19th 2015, 1:06pm

Ok, I updated the poster image and now all is working... Thanks!

A couple more questions if you don't mind...

1. In my original demo (http://jakesiemer.com/projects/pano/index.bak.rev-a.htm) I had the video take up the entire screen (no black bars) while still maintaining the aspect ratio. Is this also possible with the current XML code you have provided? I tried putting it in my current demo and it's not working. Any help would be much appreciated. (source code for this technique was found here: Flat Video Full size)

2. On the iPhone the video loop is not working. Is there a workaround to get video looping on iPhone?

3. I have been able to swap video sources pretty easily using the playvideo() function, however, how do I set both regular and iOS sources in the same call and let the plugin decide which is best?

Also, I talked with my boss today and he is ready to fork over the money for the license. I did want to ask, if we buy the license will it remove the "krpano demo" text over my page, or do I also have to buy the no branding license?

Thanks for all your help!

9

Saturday, June 20th 2015, 6:50am

Hi,

1. Yes, that's possible - take the xml example from above and change:

Source code

1
<view ... limitview="fullrange" />
to:

Source code

1
<view ... limitview="range" />

and

Source code

1
if(video_aspectratio GT screen_aspectratio,
to:

Source code

1
if(video_aspectratio LT screen_aspectratio,



2. That's an iOS bug related to the video encoding. Try encoding the video with an other tool (e.g. ffmpeg should work).


3. Use if() checks and the device object - e.g.

Source code

1
if(device.iphone, playvideo(...));


About the license - yes, with a normal krpano license there will be no demo logo and no watermarks anymore. The optional and additional branding free license is for removing the 'about krpano' from the context menu.

Best regards,
Klaus

10

Monday, June 22nd 2015, 5:12pm

Perfect, that new code works.

Still unable to encode the video for iPhone to enable looping. I used FFMPEG and it still doesn't work. Can you tell me what encoding settings I might use to make it work?

Thanks!

11

Tuesday, June 23rd 2015, 11:43am

I don't know the exact encoding settings yet I've used for the example videos (I will check them later), but I think I was using a baseline or main 3.1 profile for iOS...

12

Wednesday, June 24th 2015, 5:06am

Thanks, but I tried every setting imaginable, and not a single video that I encoded allowed for looping on iPhone. It would be amazing if you could share your encoding settings with me!

Thanks!

13

Friday, June 26th 2015, 7:37am

Hi,

for the videos on the krpano video pano page I've used these ffmpeg settings for the 1024x512 iOS videos:

Source code

1
-r 30 -g 90 -movflags faststart -c:v libx264 -profile:v baseline -level 3.1 -crf 25 -maxrate 1250k


Best regards,
Klaus

14

Monday, July 27th 2015, 4:50pm

Unfortunately I still have not been able to encode a working example using those settings. Any other ideas?

Also, I have my playpause_image UI element -- once the video has been successfully played I would like to hide this UI element. I was thinking of swapping the source with a blank spacer pixel, but I cannot get it working.

I tried executing this line of code:
set(layer[interface_playpause_image].style, interface_nullimage);



<!-- BASE SPRITE-SHEET IMAGES STYLES -->
<style name="interface_pauseimage" url="%CURRENTXML%/../images/UI_Play-Pause.png" />
<style name="interface_nullimage" url="%CURRENTXML%/../images/UI_Spacer-Pixel.png" />

<!-- THE STARTUP/INFO PLAY/PAUSE BUTTON -->
<layer
name="interface_playpause_image"
zorder="1"
style="interface_pauseimage"
crop="0|0|200|200"
onovercrop="0|200|200|200"
ondowncrop="0|200|200|200"
align="center"
visible="false"
alpha="0.0"
scale="1.5"
/>

Is there any other way to hide the UI element?

15

Friday, July 31st 2015, 1:12am

Bump! Need to get this done for my client ASAP! Thanks!

Posts: 1,850

Occupation: Virtual Tours - Photography - Krpano developer

  • Send private message

16

Friday, July 31st 2015, 5:27am

What's your issue?
Where's your current project?
Video loops fine for me on iphone.
KRPano Developer: Portfolio ::Gigapixel Tagging Solutions - Porfolio 2 :: Facebook :: Twitter :: reddit.com/r/VirtualTour

17

Friday, July 31st 2015, 5:38am

Project is here: (will use KRPano when the iPhone/iPod user agent is detected)

http://content.frontgate.com/projects/sebastian/

Problem is this:

Unfortunately I still have not been able to encode a working example using those settings. Any other ideas?

Also, I have my playpause_image UI element -- once the video has been successfully played I would like to hide this UI element. I was thinking of swapping the source with a blank spacer pixel, but I cannot get it working.

I tried executing this line of code:
set(layer[interface_playpause_image].style, interface_nullimage);



< !-- BASE SPRITE-SHEET IMAGES STYLES -->
< style name="interface_pauseimage" url="%CURRENTXML%/../images/UI_Play-Pause.png" />
< style name="interface_nullimage" url="%CURRENTXML%/../images/UI_Spacer-Pixel.png" />

< !-- THE STARTUP/INFO PLAY/PAUSE BUTTON -->
< layer
name="interface_playpause_image"
zorder="1"
style="interface_pauseimage"
crop="0|0|200|200"
onovercrop="0|200|200|200"
ondowncrop="0|200|200|200"
align="center"
visible="false"
alpha="0.0"
scale="1.5"
/>

Is there any other way to hide the UI element?

Posts: 1,850

Occupation: Virtual Tours - Photography - Krpano developer

  • Send private message

18

Friday, July 31st 2015, 5:54pm

Source code

1
2
3
Problem is this:

Unfortunately I still have not been able to encode a working example using those settings. Any other ideas?


Working how?

You can't have videos on iphone with interactivity. It's not possible.
I can't find your krpano anywhere on that site.

http://krpano.com/plugins/videoplayer/#onvideocomplete


Source code

1
.... onvideocomplete="tween(layer[interface_playpause_image].alpha,0);"
KRPano Developer: Portfolio ::Gigapixel Tagging Solutions - Porfolio 2 :: Facebook :: Twitter :: reddit.com/r/VirtualTour

19

Wednesday, August 12th 2015, 8:39pm

Source code

1
2
3
Problem is this:

Unfortunately I still have not been able to encode a working example using those settings. Any other ideas?


Working how?

You can't have videos on iphone with interactivity. It's not possible.
I can't find your krpano anywhere on that site.

http://krpano.com/plugins/videoplayer/#onvideocomplete


Source code

1
.... onvideocomplete="tween(layer[interface_playpause_image].alpha,0);"

Did you visit my site with an iPhone user agent? It uses KRPano when iPhone is detected.

I'm confused. You say that video on iPhone doesn't work, but it's working just fine for me. I just need my iPhone videos to loop!