Uploaded image for project: 'ZK'
  1. ZK
  2. ZK-4875

Implement media onEnded event

    XMLWordPrintable

    Details

    • Type: New Feature
    • Status: Closed
    • Priority: Normal
    • Resolution: Done
    • Affects Version/s: 9.6.0
    • Fix Version/s: 9.6.0
    • Component/s: None
    • Security Level: Jimmy
    • Labels:
      None

      Description

      User Story

      As a developer I want to execute an event listener after a video or an audio has finished playing, for example to queue the next video in a list.
      In order to do so, I need to know when the video or the audio has ended. the onStateChange event is not sufficient, since it will return pause state both on video end and on user pause.

      Acceptance Criteria

      can listen to the html onEnded event directly from ZK

      Details

      https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended_event

       

      POC

      	<script><![CDATA[
      	zk.afterLoad("zkmax.med", function () {
      	    var _xVideo = {};
      	    zk.override(zkmax.med.Video.prototype, _xVideo, {
      	        bind_: function() {
      				var result = _xVideo.bind_.apply(this, arguments);
      				var self = this;
      				this.myEndEventListener = function(event){
      					self.fire("onCustomEndEvent", null, {toServer:true});
      				}
      				this.$n("real").addEventListener("ended", this.myEndEventListener);
      				return result;
      	        },
      	    	unbind_: function() {
      	        	this.$n("real").removeEventListener("ended", this.myEndEventListener);
      				var result = _xVideo.unbind_.apply(this, arguments);
      				return result;
      	        }
      	     });
      	});
      ]]></script>
      

       

        Attachments

          Activity

            People

            Assignee:
            DevChu DevChu
            Reporter:
            MDuchemin MDuchemin
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

              Dates

              Created:
              Updated:
              Resolved: