You are not logged in.

Show instruction image and the play button, when the user clicks the play button play the video

alex3005

Beginner

  • "alex3005" started this thread

Posts: 1

  • Send private message

1

Friday, December 30th 2016, 10:46am

Show instruction image and the play button, when the user clicks the play button play the video

So what I'm trying to achieve is that, the user will see an
instruction image with steps the user will need to take, first click on
play , click on the cardboard icon, place the phone in the cardboard. I have used the videopano as example and i have the video working.


But I have no idea on how to add an image to the screen with the play, pause, temp, vr cardboard icon visible so they can click it, when the user clicked the play button I want the image to go invisible, how can I achieve that ?


Some detailed explanation would be great :D

My current code:
videopano.xml

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
42
43
44
45
46

<krpano>

	<action name="startup" autorun="onstart">

		if(device.panovideosupport == false,
			error('Sorry, but panoramic videos are not supported by your current browser!');
		  ,
			loadscene(videopano);
		  );
	</action>

	<scene name="videopano" title="krpano Panoramic Video Example">

		<!-- include the videoplayer interface / skin (with VR support) -->
		<include url="skin/videointerface.xml" />

		<!-- include the videoplayer plugin -->
		<plugin name="video"
		    	url.html5="plugins/videoplayer.js"
		    	url.flash="plugins/videoplayer.swf"
		    	loop="true"
		    	volume="1.0"
						pausedonstart="true"
					  onloaded="add_video_sources();"
		    	/>

		<!-- use the videoplayer plugin as panoramic image source -->
		<image>
			<sphere url="plugin:video" />
		</image>

		<!-- set the default view -->
		<view hlookat="0" vlookat="0" fovtype="DFOV" fov="130" fovmin="75" fovmax="150" distortion="0.0" />

		<!-- add the video sources and play the video -->
		<action name="add_video_sources">
			videointerface_addsource('1920x1080', 'video.mp4');


		 videointerface_play('1920x1080');

		</action>

	</scene>

</krpano>


My index.html

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

<!DOCTYPE html>
<html>
<head>
	<title>video</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<meta http-equiv="x-ua-compatible" content="IE=edge" />
	<style>
		@-ms-viewport { width:device-width; }
		@media only screen and (min-device-width:800px) { html { overflow:hidden; } }
		html { height:100%; }
		body { height:100%; overflow:hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; }
	</style>
</head>
<body>

<script src="/video/krpano.js"></script>
<div id="pano" style="width:100%;height:100%;">
	<noscript><table style="width:100%;height:100%;"><tr style="vertical-align:middle;text-align:center;"><td>ERROR:<br><br>Javascript not activated<br><br></td></tr></table></noscript>
	<script>
		embedpano({swf:"krpano.swf", xml:"videopano.xml", target:"pano", html5:"auto", mobilescale:1.0, passQueryParameters:true});
	</script>
</div>
</body>
</html>


Greetz,

Alex

This post has been edited 1 times, last edit by "alex3005" (Jan 2nd 2017, 9:49am)

Similar threads