Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-73185

Media Gallery videos preview does not stop playing neither when slide changes nor when player closes

    Details

    • What problem did the customer find?:
      Hide
      When videos are published and showed by "Media Gallery" portlet, they are played until the end although you change between them. So if you play various videos, their sound mixes. And if you close video preview, they are playing until the end. It is a bad user experience.
      Show
      When videos are published and showed by "Media Gallery" portlet, they are played until the end although you change between them. So if you play various videos, their sound mixes. And if you close video preview, they are playing until the end. It is a bad user experience.
    • What do you think is the root cause? (if known):
      Hide
      There are two different areas the page where Media Gallery portlet is rendered:

      1.- A control (player) for rotating between different images (videos). It a list of (images/videos) thumbnails and some additional buttons for start/pause/next/previous/exit.

      2.- A viewer that has embedded a video player similar to following:
      <video id="yui_patched_v3_18_1_1_1497874650938_134" controls="controls" class="video-node" poster="http://localhost:8080/documents/20143/31502/sample.avi/e88e8f54-e357-df30-d619-b641c264a5a2?version=1.0&amp;videoThumbnail=1"><source type="video/mp4;" src="http://localhost:8080/documents/20143/31502/sample.avi/e88e8f54-e357-df30-d619-b641c264a5a2?version=1.0&amp;supportedVideo=1&amp;videoPreview=1&amp;type=mp4"><object id="yui_patched_v3_18_1_1_1497874650938_222" type="application/x-shockwave-flash" data="/o/frontend-js-web/aui/aui-video/assets/player.swf?t=1497874651123" height="100%" width="100%"><param name="allowfullscreen" value="true"><param name="bgColor" value="#000000"><param name="wmode" value="opaque"><param name="flashVars" value="controls=true&amp;poster=http%3A%2F%2Flocalhost%3A8080%2Fdocuments%2F20143%2F31502%2Fsample.avi%2Fe88e8f54-e357-df30-d619-b641c264a5a2%3Fversion%3D1.0%26videoThumbnail%3D1&amp;src=http%3A%2F%2Flocalhost%3A8080%2Fdocuments%2F20143%2F31502%2Fsample.avi%2Fe88e8f54-e357-df30-d619-b641c264a5a2%3Fversion%3D1.0%26supportedVideo%3D1%26videoPreview%3D1%26type%3Dmp4"><img src="http://localhost:8080/documents/20143/31502/sample.avi/e88e8f54-e357-df30-d619-b641c264a5a2?version=1.0&amp;videoThumbnail=1" alt=""></object></video>
      Important: there is a viewer for each video, but only one selected video's is showed.

      Thus, if you publish three videos (A, B and C), you will have:
      - A list of three buttons, so if you click on, you are positioned (selected) on that video.
      - A button for start/pause the rotation between videos.
      - A 'next' button and a 'previous' button for moving between videos.
      - An 'exit' button.
      - Three viewers, but only one of them showed (actived). These viewers can play/pause each video in an independent way.
      Show
      There are two different areas the page where Media Gallery portlet is rendered: 1.- A control (player) for rotating between different images (videos). It a list of (images/videos) thumbnails and some additional buttons for start/pause/next/previous/exit. 2.- A viewer that has embedded a video player similar to following: <video id="yui_patched_v3_18_1_1_1497874650938_134" controls="controls" class="video-node" poster=" http://localhost:8080/documents/20143/31502/sample.avi/e88e8f54-e357-df30-d619-b641c264a5a2?version=1.0&amp;videoThumbnail=1 "><source type="video/mp4;" src=" http://localhost:8080/documents/20143/31502/sample.avi/e88e8f54-e357-df30-d619-b641c264a5a2?version=1.0&amp;supportedVideo=1&amp;videoPreview=1&amp;type=mp4 "><object id="yui_patched_v3_18_1_1_1497874650938_222" type="application/x-shockwave-flash" data="/o/frontend-js-web/aui/aui-video/assets/player.swf?t=1497874651123" height="100%" width="100%"><param name="allowfullscreen" value="true"><param name="bgColor" value="#000000"><param name="wmode" value="opaque"><param name="flashVars" value="controls=true&amp;poster=http%3A%2F%2Flocalhost%3A8080%2Fdocuments%2F20143%2F31502%2Fsample.avi%2Fe88e8f54-e357-df30-d619-b641c264a5a2%3Fversion%3D1.0%26videoThumbnail%3D1&amp;src=http%3A%2F%2Flocalhost%3A8080%2Fdocuments%2F20143%2F31502%2Fsample.avi%2Fe88e8f54-e357-df30-d619-b641c264a5a2%3Fversion%3D1.0%26supportedVideo%3D1%26videoPreview%3D1%26type%3Dmp4"><img src=" http://localhost:8080/documents/20143/31502/sample.avi/e88e8f54-e357-df30-d619-b641c264a5a2?version=1.0&amp;videoThumbnail=1 " alt=""></object></video> Important: there is a viewer for each video, but only one selected video's is showed. Thus, if you publish three videos (A, B and C), you will have: - A list of three buttons, so if you click on, you are positioned (selected) on that video. - A button for start/pause the rotation between videos. - A 'next' button and a 'previous' button for moving between videos. - An 'exit' button. - Three viewers, but only one of them showed (actived). These viewers can play/pause each video in an independent way.
    • Proposed solution (if any):
      Hide
      Having a mechanism of communication between described areas could resolve the problem. When the user selects a video (either clicking on it, or by auto-rotation, or by next/previous...) a 'signal' could be sent to the viewer for pausing the current video. Then the (new) selected video is showed in the viewer.

      Show
      Having a mechanism of communication between described areas could resolve the problem. When the user selects a video (either clicking on it, or by auto-rotation, or by next/previous...) a 'signal' could be sent to the viewer for pausing the current video. Then the (new) selected video is showed in the viewer.

      Description

      Preconditions:

      1. Enable Xuggler.
      2. From "Documents and Media", publish some videos with sound (i.e. three or four)
      3. Add "Media Gallery" portlet to a page.

      Steps to reproduce:
      1.- Navigate to page with "Media Gallery" portlet in.
      2.- Click on it to start slideshow.
      3.- A player is showed and the slides starts to cycle.
      4.- Click on play video to start preview of one of them: video starts playing.
      5.- Change to another slide before video ends playing.

      Expected behaviour:

      • Video stops playing.

      Observer behaviour:

      • Video continues playing.

      6.- Close the Media Gallery portlet while a video is playing.

      Expected behaviour:

      • Video stops playing.

      Observer behaviour:

      • Video continues playing.

      Note.
      In 6.2.x the behaviour is as expected (video stops) but analysing the source code you can see that implementation is different. So it could be considered a refactoring issue.

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                ryan.ohara Ryan Ohara (Inactive)
                Reporter:
                sergio.alonso Sergio Alonso
                Participants of an Issue:
                Recent user:
                Csaba Turcsan
              • Votes:
                0 Vote for this issue
                Watchers:
                1 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Days since last comment:
                  2 years, 7 weeks, 1 day ago

                  Packages

                  Version Package
                  7.0.0 DXP FP22
                  7.0.0 DXP FP23
                  7.0.0 DXP SP4
                  7.0.X EE
                  7.0.4 CE GA5
                  7.1.X
                  Master