Develop Reference

AMP Audio: Track Play/Pause/Complete and Capture in Google Tag Manager

I am working with the amp-audio component for a project, and need to be able to set up tags and triggers in Google Tag Manager track when the user plays/pauses the audio, and when the audio completes. From the documentation for amp-audio, it claims that I can utilize the Audio Play and Pause triggers to track the events via amp-analytics. However, this does not work to trigger any analytics. Further, the amp-analytics documentation only lists video-* for media-related triggers, with no reference whatsoever anywhere on the page to anything related to amp-audio. This conflict of documentation is not only confusing, but frustrating since there's no way to tell which is accurate, if either.
Code snippets and trigger configuration (taken straight from the amp-audio documentation, updated with my own ids), which does not work:
<amp-audio id="my-amp-audio-player" controlsList="nodownload" height="50" width="auto">
...
</amp-audio>
...and...
"triggers": {
"audioPlay": {
"on": "audio-play",
"request": "event",
"selector": "#my-amp-audio-player"
},
"audioPause": {
"on": "audio-pause",
"request": "event",
"selector": "#my-amp-audio-player"
}
}
As a workaround, I've also tried to include and use custom JS via the amp-script component. Using this with amp-audio has proven fruitless, and I've also tried to use a straight-up audio tag in place of amp-audio. Using the pure audio tag gives me the ability to target the audio player and capture play, pause, and ended events...however, trying to do anything that would result in a successful AMP trigger ends up throwing the "terminated due to illegal mutation" error as documented in the amp-script documentation.
Code snippets for a click event trigger set up in Google Tag Manager:
Markup:
<amp-script layout="container" src="/static-assets/audio.js">
<audio id="my-amp-audio-player" controls controlsList="nodownload" height="50" width="auto">
...
</audio>
<button id="btn-audio-play-trigger">Play Trigger</button>
<button id="btn-audio-pause-trigger">Pause Trigger</button>
</amp-script>
JS:
const audioPlayer = document.getElementById('my-amp-audio-player')
audioPlayer.addEventListener('play', () => {
// Below (and other uses of this) results in illegal mutation error (if an AMP component)
// or something like 'TypeError: document.getElementById(...).click is not a function'
// when using a <button> element
document.getElementById('btn-audio-play-trigger').click()
})
audioPlayer.addEventListener('pause', () => {
document.getElementById('btn-audio-pause-trigger').click()
})
audioPlayer.addEventListener('ended', () => {
// TODO: Implement functionality as needed
})
Current Status:
No matter which implementation or combination of uses I implement, nothing I've tried has been able to successfully trigger and catch an amp-audio or audio event that Tag Manager can catch and log. Any advice, insight, or direction is appreciated!

How to access a Dailymotion video using the JS API when the video ID is unknown?

I have some embed code like:
<iframe id="video1" class="video" src=""//www.dailymotion.com/embed/video/VIDEO_ID?autoPlay=1&wmode=transparent&loop=1&controls=0&showinfo=0&api=1&endscreen-enable=0&mute=1" allowfullscreen="true" frameborder="0" width="560" height="349"></iframe>
I am trying to access this video using Javascript but the Video ID is not known in advance (it must be able to be set within our CMS and be changed by any editor). Also it is possible to have more than one video on the page. Hard-coding the video ID(s) in my .js file is not possible.
Using the Javascript API, I need to write a custom play/pause function (passing in the button object they clicked) and also to detect when the video has ended and re-start it (to imitate looping, which Dailymotion apparently does not support for some reason). But it seems a call to:
DM.Player(document.getElementById(iframeID), { video: VIDEO_ID})
requires the video's ID to be known (I do know the iFrame ID where the video is but apparently that isn't enough to access the player like it is for other video platforms).
I then need to be able to create a function to call play or pause based on whether the user has clicked the play/pause toggle on a specific video. My Javascript knowledge isn't great, but I have been able to do this with other platforms by knowing the iframe ID. The play/pause does work if I hard-code a video ID but only if there is one video on the page and only if I do not try to "loop" the video.
This is a private video, if that matters - we want it to only be viewed on our website and not on Dailymotion.
Pseudo-code greatly appreciated as I find their API documentation a bit incomplete for a newcomer (such as not specifying if parameters are required or optional, and not listing available options like for params and events during DM.Player initialization)
EDIT: Here is how I access the video API with other video hosting services (YouTube, Vimeo, Brightcove, etc)
I build an array of all HTML elements with a certain class name (recall there can be more than one video). Say the class name is ".video" so I build an array of all ".video" on the page and their corresponding HTML id. I then use document.getElementById to populate the array with the players.
Then in the play/pause click function, I can access the video like so:
var player = players[index];
var state = player.getPlayerState();
if (state == 1) {
player.pauseVideo();
}
else {
player.playVideo();
}
This does not work for Dailymotion because the actual DM Video ID (and not the HTML element's ID) must be known in advance. I was wondering if there is a way to access the video via the Javascript API without knowing the video ID?

I don't use DailyMotion API but I knocked up this experiment which might be useful to you.
See if the comments in my example code below help you to understand how to use your own buttons with JS functions and how to handle video "end" event etc.
<!DOCTYPE html>
<html>
<body>
<!-- 1. Load DailyMotion API (Javascript) -->
<script src='https://api.dmcdn.net/all.js'> </script>
<!-- 2. Create container for DM Player instance -->
<div id='player'></div>
<!-- 3. Javascript stuff goes here -->
<script>
//Set VIDEO_ID (retrieve or update from your CMS)
//**example** var VIDEO_ID = get_video_id.php **where PHP returns/echo the text of ID**
var VIDEO_ID = "xwr14q"; //update this via your CMS technique
//Create DM Player instance//
var player = DM.player(document.getElementById('player'), {
video: VIDEO_ID,
width: "100%", height: "100%",
params: { autoplay: false, mute: true }
});
//Handle video ending (seek back to zero time)//
player.addEventListener('end', function (evt) { evt.target.currentTime = 0; evt.target.play() } );
//Control functions for DM Player instance//
function func_Play()
{ player.play(); }
function func_Pause()
{ player.pause(); }
</script>
<p>
<!-- Buttons for play pause -->
<button onclick="func_Play()"> PLAY </button>
<button onclick="func_Pause()"> PAUSE </button>
</p>
</body>
</html>
Also regarding
"...It is possible to have more than one video on the page"
Do some "experience quality" tests. Just be sure your users don't mind multiple looping videos running at once (eg: may slow your page / their browser, or drain their data allowance if on mobile, etc).
To handle multiple videos, I would just put each video player in it's own HTML page (like above shown code) and then in main page just load multiple iframes pointing to each player's HTML.

How can I disable fullscreen mode in Kaltura's HTML5 media player?

I'm loading Kaltura's video player in a learning management system (essentially a CMS for educators and their students), and it gets presented inside an iframe. With current browser security protocols as they are, full screen viewing is not possible. I need to disable the fullscreen capability for this use case. Here's an idea how we have the embed set up:
loadMovie: function(id) {
var autoPlay = this._autoPlay;
var allowFullScreen = this._allowFullScreen;
kWidget.embed({
'wid': '_' + this._partnerId,
'targetId': this._playerTarget,
'uiconf_id': this._playerId,
'entry_id': id,
'params': {
'wmode': 'transparent',
'allowFullScreen': allowFullScreen, // not working for html player
},
'captureClickEventForiOS': true,
'readyCallback': function (playerId) { // autoPlay movies
var kdp = document.getElementById(playerId);
kdp.kBind('mediaReady', function() {
kdp.sendNotification('doPlay');
});
}
});
}
I've been able to hide the fullscreen button with CSS, but a user can still (intentionally or inadvertently) double-click the playback area to achieve fullscreen. Because of the iframe issue, the video essentially disappears, leaving the user confused and unable to easily close the player modal.
I'm passing a data attribute from the movie links to the player init function to indicate when fullscreen should be unavailable. I just need to find out how to actually do the disabling. Kaltura's documentation has not been helpful.
I've also fiddled with legacy Flash params, but they have no effect on the HTML 5 player. I'm using version 2.11. Thank you.

You need to put this in a script tag:
mw.setConfig('EmbedPlayer.EnableFullscreen', false);

Why don't you simply put a div overlay on top of the player with z-index, say 10000. That way, even if some double-clicks, they are clicking on the DIV and nothing happens. Continue with the CSS button hiding.

click a button to load a different video player into div

i'm working on adding a video to the home page of a site i'm working on. ideally, i'd like to show the youtube version by default, and add a button underneath that says something like "don't have access to youtube? click here to watch an alternate version".
once clicked, a different player will load into the same video div and replace the youtube version.
we have the video uploaded to youtube, and also have an html5 version on the site that is played via the video.js plugin for wordpress.
how can i load the alternate html5 video player into the div via a button click (without refreshing the page if possible)? i'm assuming this can be done via javascript / jquery / ajax somehow, but I'm not sure how to do this (my js level is novice).
thanks!!

You can clear the div out with:
$("#yourDivID").empty()
Then populate the div with new content
var newHtml = "Whatever you want!"
$("#yourDivID").append(newHtml);
Or
$("#yourDivID").html(newHtml);
Here's a very primitive example of replacing content in a Div: http://jsfiddle.net/FJuwd/

Html
<div id="myvideodiv"> </div>
In script
mybutton.click(function(){
playerMethod("myvideodiv").setup({ //here player intializations based on sepecific type
file: "/uploads/example.mp4",
height: 360,
image: "/uploads/example.jpg",
width: 640
});
})
see example here.

jQuery solution: Just create div and populate with video on button click. Many ways to do this. The check for length is only there to eliminate putting another video up.
<div id="player"><div>
<button id="clickme">Click to play video</button>
$("#clickme").on("click", function(e) {
if($('#myfileplayer').length == 0) {
var mydiv = $("#player");
var myvideo = $("<video id='myfileplayer' src='http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv' width='320' height='240' controls></video>");
mydiv.append(myvideo);
}
});
See example

thanks so much everyone for all of the help. love this place.
i was actually able to work this out more easily by just toggling divs that contain the two different videos. not sure why i didn't think of this initially. doesn't actually remove the content, just hides it, but i think it will work for me.
html
<div id="youtube">my youtube vid</div>
<div id="html5" style="display:none;">my alternate vid</div>
<input type="button" value="switch video" id="click"/>
jquery
$(function(){
$('#click').click(function(){
$('#youtube').toggle();
$('#html5').toggle();
});
});
i also tried this with the js, so the youtube video would be removed & stop playing when the divs are toggled
$(function(){
$('#click').click(function(){
$('#youtube').toggle();
$('#html5').toggle();
$('#youtube').empty();
});
});
this works, but i wasn't sure how to add the youtube video back when toggling back. not really a big deal - just something i was curious about. i'm assuming it can be done with .append.
problem with this is that both of the vids exist in the wordpress page as shortcodes, so it complicates things a bit. i just wrapped the shortdoces in divs with these ids in the wordpress page to get the toggle working, and added the js to my page template. thx again!

Flash in fullscreen mode works in <embed>, but not work within <a> tag

I have this code
<div id="c01" class="hider">
< a href="flash.swf" class="bump">flash</a>
</div>
and it displays flash content within a bumpbox (lightbox alternative) window. It works perfectly, but there is a fullscreen button in the flash animation and it do not works. The other button (to stop the animation) works ok.
I find out, that with this
<embed src="flash.swf" width="100%" height="100%" allowFullScreen="true"> </embed>
fullscreen button works fine, but the flash animation runs since the page is loaded and I have about 50 of those animations, so I need to run only one of them at a time. I need to make it clickable (within ) and with working fullscreen button at the same time. Is it possible? Thank you!

The issue you're having is actually coming from Mootools. Mootools has an Flash embed class called Swiff, which is what BumpBox uses when you pass an SWF in your link.
Unfortunately, I think you're either going to have to hack into BumpBox or Mootools to get full screen permission working.
If you look into the expanded version of BumpBox 2.0.1, you will see where Swiff is instantiated, around line 372:
var obj = new Swiff(content, {
id: 'video',
width: maxw-40,
height: maxh-40,
container: div
})
You may be able to pass in the additional parameter you require here, which would look something like this:
var obj = new Swiff(content, {
id: 'video',
width: maxw-40,
height: maxh-40,
container: div,
params: {
allowFullScreen: true
},
})
If that fails you will have to make the adjustment to the Swiff class itself. Open up Mootools and search for Swiff=new Class. That will lead you to the code that creates the Flash object. Finding the params list should be easy from there, it looks like:
params:{quality:"high",allowScriptAccess:"always",wMode:"window",swLiveConnect:true}
and you would just need to add the fullscreen permission:
params:{allowFullScreen:true,quality:"high",allowScriptAccess:"always",wMode:"window",swLiveConnect:true}

Some browsers can't open a Flash file without Flash container (embed).
The embed code in your post is fine, put it on a PHP page and replace:
src="flash.swf"
with
<?php echo $_GET['flashurl']; ?>
Then you can put as link: nameofphpscript.php?flashurl=flash.swf