Sie sind nicht angemeldet.

Video width distorted

JakeSiemer

Anfänger

  • »JakeSiemer« ist der Autor dieses Themas

Beiträge: 10

  • Nachricht senden

1

Dienstag, 16. Juni 2015, 09:37

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!

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »JakeSiemer« (19. Juni 2015, 05:02)

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

2

Dienstag, 16. Juni 2015, 14:01

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:

Quellcode

 
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

JakeSiemer

Anfänger

  • »JakeSiemer« ist der Autor dieses Themas

Beiträge: 10

  • Nachricht senden

3

Mittwoch, 17. Juni 2015, 01:04

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?

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

4

Mittwoch, 17. Juni 2015, 08:07

Hi,

that would be possible too:

Quellcode

 
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

JakeSiemer

Anfänger

  • »JakeSiemer« ist der Autor dieses Themas

Beiträge: 10

  • Nachricht senden

5

Donnerstag, 18. Juni 2015, 01:54

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?

sachagriffin

Meister

Beiträge: 1 857

Beruf: Virtual Tours - Photography - Krpano developer

  • Nachricht senden

6

Donnerstag, 18. Juni 2015, 05:24

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

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

7

Donnerstag, 18. Juni 2015, 08:09

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

JakeSiemer

Anfänger

  • »JakeSiemer« ist der Autor dieses Themas

Beiträge: 10

  • Nachricht senden

8

Freitag, 19. Juni 2015, 13:06

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!

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

9

Samstag, 20. Juni 2015, 06:50

Hi,

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

Quellcode

 
1

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

Quellcode

 
1

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

and

Quellcode

 
1

if(video_aspectratio GT screen_aspectratio,
to:

Quellcode

 
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.

Quellcode

 
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

JakeSiemer

Anfänger

  • »JakeSiemer« ist der Autor dieses Themas

Beiträge: 10

  • Nachricht senden

10

Montag, 22. Juni 2015, 17:12

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!

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

11

Dienstag, 23. Juni 2015, 11:43

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...

JakeSiemer

Anfänger

  • »JakeSiemer« ist der Autor dieses Themas

Beiträge: 10

  • Nachricht senden

12

Mittwoch, 24. Juni 2015, 05:06

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!

klaus.krpano

Administrator

Beiträge: 13 499

  • Nachricht senden

13

Freitag, 26. Juni 2015, 07:37

Hi,

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

Quellcode

 
1

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


Best regards,
Klaus

JakeSiemer

Anfänger

  • »JakeSiemer« ist der Autor dieses Themas

Beiträge: 10

  • Nachricht senden

14

Montag, 27. Juli 2015, 16:50

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?

JakeSiemer

Anfänger

  • »JakeSiemer« ist der Autor dieses Themas

Beiträge: 10

  • Nachricht senden

15

Freitag, 31. Juli 2015, 01:12

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

sachagriffin

Meister

Beiträge: 1 857

Beruf: Virtual Tours - Photography - Krpano developer

  • Nachricht senden

16

Freitag, 31. Juli 2015, 05:27

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

JakeSiemer

Anfänger

  • »JakeSiemer« ist der Autor dieses Themas

Beiträge: 10

  • Nachricht senden

17

Freitag, 31. Juli 2015, 05:38

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?

sachagriffin

Meister

Beiträge: 1 857

Beruf: Virtual Tours - Photography - Krpano developer

  • Nachricht senden

18

Freitag, 31. Juli 2015, 17:54

Quellcode

 
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


Quellcode

 
1

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

JakeSiemer

Anfänger

  • »JakeSiemer« ist der Autor dieses Themas

Beiträge: 10

  • Nachricht senden

19

Mittwoch, 12. August 2015, 20:39

Zitat von »sachagriffin«

Quellcode

 
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


Quellcode

 
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!

Ähnliche Themen