Binding to Player Events

The following example shows how to bind to various events in the player. You can also use this example to troubleshoot events in various browsers.

Overview

mediaTimeUpdate mediaResumed mediaPaused mediaWaiting
mediaTimeUpdate mediaResumed mediaPaused mediaWaiting
mediaPlaying mediaEnded mediaError mediaLoadStart
mediaPlaying mediaEnded mediaError mediaLoadStart

Event List

Time Event Value

Sample Code

Vio.OnReady(function () { var targets = Vio.Player.GetTargets(); if (targets.length > 0) { var target = targets[0].Element; Vio.Event.Bind(target, "mediaTimeUpdate", function (evt) { //Only log time changes every 10 seconds if (Math.ceil(evt.value.currentTime) % 10 == 0) { displayEvent("mediaTimeUpdate", Math.ceil(evt.value.currentTime)); Vio.AddClass(document.getElementById("mediaTimeUpdate"), "triggered"); } }, null); Vio.Event.Bind(target, "mediaResumed", function (evt) { displayEvent("mediaResumed", evt.value); Vio.AddClass(document.getElementById("mediaResumed"), "triggered"); }, null); Vio.Event.Bind(target, "mediaPaused", function (evt) { displayEvent("mediaPaused", evt.value); Vio.AddClass(document.getElementById("mediaPaused"), "triggered"); }, null); Vio.Event.Bind(target, "mediaWaiting", function (evt) { displayEvent("mediaWaiting", evt.value); Vio.AddClass(document.getElementById("mediaWaiting"), "triggered"); }, null); Vio.Event.Bind(target, "mediaPlaying", function (evt) { displayEvent("mediaPlaying", evt.value); Vio.AddClass(document.getElementById("mediaPlaying"), "triggered"); }, null); Vio.Event.Bind(target, "mediaEnded", function (evt) { displayEvent("mediaEnded", evt.value); Vio.AddClass(document.getElementById("mediaEnded"), "triggered"); }, null); Vio.Event.Bind(target, "mediaError", function (evt) { displayEvent("mediaError", evt.value); Vio.AddClass(document.getElementById("mediaError"), "triggered"); }, null); Vio.Event.Bind(target, "mediaLoadStart", function (evt) { displayEvent("mediaLoadStart", evt.value); Vio.AddClass(document.getElementById("mediaLoadStart"), "triggered"); }, null); } });