Hi @tdhote,
This can be implemented in many ways and one of the ways is shown below:
- Drag and drop 3 button widgets on 2D canvas.
- For button-1, bind the click event to the video-1 widget 'play' property value. Also, bind click event to the video-2 and video-3 'pause' property value. Now, click on the JS which is next to click event and call the video1(); function.
- For button-2, bind the click event to the video-2 widget 'play' property value. Also bind click event to the video-1 and video-3 'pause' property value. Now, click on the JS which is next to click event and call the video2(); function.
- For button-3, bind the click event to the video-3 widget 'play' property value. Also bind click event to the video-1 and video-2 'pause' property value. Now, click on the JS which is next to click event and call the video3(); function.
- Drag 3 video widgets on to the 2D canvas, uncheck the visible property of all the video widgets and upload the resource in the Video Source as shown below:
- Create 3 application parameters with any desired namd in the Data panel and set it's value to false.
- Drag the binding icon next to the application parameter and drop it on the visible property of the video widget as shown below:
- Repeat the same for other two application parameters. Bind them to their respective video visible property.
- Click on Home.js and paste the below code:
-
$scope.video1 = function() {
$scope.app.params.visible = true;
$scope.app.params.visible2 = false;
$scope.app.params.visible3 = false;
}
$scope.video2 = function() {
$scope.app.params.visible = false;
$scope.app.params.visible2 = true;
$scope.app.params.visible3 = false;
}$scope.video3 = function() {
$scope.app.params.visible = false;
$scope.app.params.visible2 = false;
$scope.app.params.visible3 = true;
} -
Save and test the experience.
