Silk UI video widget for web

Hi,
 I have insert the 3 video in my screen, If I am clicking the 3 videos to play , its running parallely, But I want if I am clicking the 1 video to play , others 2 videos has to stop automatically.  If any idea



Thanks,

Jothi

Hi Jothi,

If you can use the Video widget from OutsystemsUiWeb instead, as this will use the Video tag from html5 instead of the flash player.

Then all you have to have in the same page is this javascript: 

SyntaxEditor Code Snippet

<script>

$(document).ready(function() {
 var videos = document.querySelectorAll('video');

function pauseAll(elem){
    for(var i=0; i<videos.length; i++){
        //Is this the one we want to play?
        if(videos[i] == elem) continue;
        //Have we already played it && is it already paused?
        if(videos[i].played.length > 0 && !videos[i].paused){
        // Then pause it now
          videos[i].pause();
        }
    }
  }
 
for(var i=0; i<videos.length; i++)
   videos[i].addEventListener('play', function(){pauseAll(this)}, true);
})
</script>


Nave Jothi wrote:

Hi,
 I have insert the 3 video in my screen, If I am clicking the 3 videos to play , its running parallely, But I want if I am clicking the 1 video to play , others 2 videos has to stop automatically.  If any idea



Thanks,

Jothi



Pedro Neto wrote:

Hi Jothi,

If you can use the Video widget from OutsystemsUiWeb instead, as this will use the Video tag from html5 instead of the flash player.

Then all you have to have in the same page is this javascript: 

SyntaxEditor Code Snippet

<script>

$(document).ready(function() {
 var videos = document.querySelectorAll('video');

function pauseAll(elem){
    for(var i=0; i<videos.length; i++){
        //Is this the one we want to play?
        if(videos[i] == elem) continue;
        //Have we already played it && is it already paused?
        if(videos[i].played.length > 0 && !videos[i].paused){
        // Then pause it now
          videos[i].pause();
        }
    }
  }
 
for(var i=0; i<videos.length; i++)
   videos[i].addEventListener('play', function(){pauseAll(this)}, true);
})
</script>


Nave Jothi wrote:

Hi,
 I have insert the 3 video in my screen, If I am clicking the 3 videos to play , its running parallely, But I want if I am clicking the 1 video to play , others 2 videos has to stop automatically.  If any idea



Thanks,

Jothi



Can you please share screen shot or oml


Solution

Nave Jothi wrote:

Pedro Neto wrote:

Hi Jothi,

If you can use the Video widget from OutsystemsUiWeb instead, as this will use the Video tag from html5 instead of the flash player.

Then all you have to have in the same page is this javascript: 

SyntaxEditor Code Snippet

<script>

$(document).ready(function() {
 var videos = document.querySelectorAll('video');

function pauseAll(elem){
    for(var i=0; i<videos.length; i++){
        //Is this the one we want to play?
        if(videos[i] == elem) continue;
        //Have we already played it && is it already paused?
        if(videos[i].played.length > 0 && !videos[i].paused){
        // Then pause it now
          videos[i].pause();
        }
    }
  }
 
for(var i=0; i<videos.length; i++)
   videos[i].addEventListener('play', function(){pauseAll(this)}, true);
})
</script>


Nave Jothi wrote:

Hi,
 I have insert the 3 video in my screen, If I am clicking the 3 videos to play , its running parallely, But I want if I am clicking the 1 video to play , others 2 videos has to stop automatically.  If any idea



Thanks,

Jothi



Can you please share screen shot or oml


Sure , there you go


Solution

Pedro Neto wrote:

Nave Jothi wrote:

Pedro Neto wrote:

Hi Jothi,

If you can use the Video widget from OutsystemsUiWeb instead, as this will use the Video tag from html5 instead of the flash player.

Then all you have to have in the same page is this javascript: 

SyntaxEditor Code Snippet

<script>

$(document).ready(function() {
 var videos = document.querySelectorAll('video');

function pauseAll(elem){
    for(var i=0; i<videos.length; i++){
        //Is this the one we want to play?
        if(videos[i] == elem) continue;
        //Have we already played it && is it already paused?
        if(videos[i].played.length > 0 && !videos[i].paused){
        // Then pause it now
          videos[i].pause();
        }
    }
  }
 
for(var i=0; i<videos.length; i++)
   videos[i].addEventListener('play', function(){pauseAll(this)}, true);
})
</script>


Nave Jothi wrote:

Hi,
 I have insert the 3 video in my screen, If I am clicking the 3 videos to play , its running parallely, But I want if I am clicking the 1 video to play , others 2 videos has to stop automatically.  If any idea



Thanks,

Jothi



Can you please share screen shot or oml


Sure , there you go



Thanks for replying me, Its working perfectly 



Thanks,

Nave

Pedro Neto wrote:

Nave Jothi wrote:

Pedro Neto wrote:

Hi Jothi,

If you can use the Video widget from OutsystemsUiWeb instead, as this will use the Video tag from html5 instead of the flash player.

Then all you have to have in the same page is this javascript: 

SyntaxEditor Code Snippet

<script>

$(document).ready(function() {
 var videos = document.querySelectorAll('video');

function pauseAll(elem){
    for(var i=0; i<videos.length; i++){
        //Is this the one we want to play?
        if(videos[i] == elem) continue;
        //Have we already played it && is it already paused?
        if(videos[i].played.length > 0 && !videos[i].paused){
        // Then pause it now
          videos[i].pause();
        }
    }
  }
 
for(var i=0; i<videos.length; i++)
   videos[i].addEventListener('play', function(){pauseAll(this)}, true);
})
</script>


Nave Jothi wrote:

Hi,
 I have insert the 3 video in my screen, If I am clicking the 3 videos to play , its running parallely, But I want if I am clicking the 1 video to play , others 2 videos has to stop automatically.  If any idea



Thanks,

Jothi



Can you please share screen shot or oml


Sure , there you go


Hi,
If I am upload the video URL that time is not working


Thanks,

Jothi


Pedro Neto wrote:

Hi Jothi,

If you can use the Video widget from OutsystemsUiWeb instead, as this will use the Video tag from html5 instead of the flash player.

Then all you have to have in the same page is this javascript: 

SyntaxEditor Code Snippet

<script>

$(document).ready(function() {
 var videos = document.querySelectorAll('video');

function pauseAll(elem){
    for(var i=0; i<videos.length; i++){
        //Is this the one we want to play?
        if(videos[i] == elem) continue;
        //Have we already played it && is it already paused?
        if(videos[i].played.length > 0 && !videos[i].paused){
        // Then pause it now
          videos[i].pause();
        }
    }
  }
 
for(var i=0; i<videos.length; i++)
   videos[i].addEventListener('play', function(){pauseAll(this)}, true);
})
</script>


Nave Jothi wrote:

Hi,
 I have insert the 3 video in my screen, If I am clicking the 3 videos to play , its running parallely, But I want if I am clicking the 1 video to play , others 2 videos has to stop automatically.  If any idea



Thanks,

Jothi



HI pedro,
I am using two ways to upload the video, 1st one upload the video, 2nd one upload url
     If I am using upload the video that time its working good
     If I am using the url to upload the videa that video is running simultaneously,
I want to work the video both way, Pls suggest


Can you share a URL you are using.

Edit: The video component from Outsystems is rendering the HTML video tag, so if you can't make your url work there, it won't work in Outsystems as well. 

Check video tag usage documentation here https://www.w3schools.com/tags/tag_video.asp 

Pedro Neto wrote:

Can you share a URL you are using.

Edit: The video component from Outsystems is rendering the HTML video tag, so if you can't make your url work there, it won't work in Outsystems as well. 

Check video tag usage documentation here https://www.w3schools.com/tags/tag_video.asp 

Hi,

If am using any youtube video, Its not working

https://www.youtube.com/embed/qpuY0jXimtQ


Nave Jothi wrote:

Pedro Neto wrote:

Can you share a URL you are using.

Edit: The video component from Outsystems is rendering the HTML video tag, so if you can't make your url work there, it won't work in Outsystems as well. 

Check video tag usage documentation here https://www.w3schools.com/tags/tag_video.asp 

Hi,

If am using any youtube video, Its not working

https://www.youtube.com/embed/qpuY0jXimtQ


That won't work with this widget.


Pedro Neto wrote:

Nave Jothi wrote:

Pedro Neto wrote:

Can you share a URL you are using.

Edit: The video component from Outsystems is rendering the HTML video tag, so if you can't make your url work there, it won't work in Outsystems as well. 

Check video tag usage documentation here https://www.w3schools.com/tags/tag_video.asp 

Hi,

If am using any youtube video, Its not working

https://www.youtube.com/embed/qpuY0jXimtQ


That won't work with this widget.


I any other idea for this function?