DOCS - Veedmo audio player embed example
by veedmo
HTML
<!DOCTYPE html>
<html>
<head>
<title>Veedmo audio player embed example</title>
</head>
<body>
<!-- DIV into which Veedmo player will be injected; DIV's class name is passed in "query_selector" param of player config. -->
<div class="embedded-audio-player"></div>
<!-- Veedmo script, injecting the player with configuration, in page. -->
<script>
(function veedmoAudioPlayer(j) {
(function veedmoEl() {
var elem = document.querySelector(j.query_selector);
if (elem) {
if (!window.veedmoAudioLoad) {
window.veedmoAudioLoad = [];
var script = document.createElement('script');
script.onload = function() {
for (var i = 0; i < window.veedmoAudioLoad.length; i++) {
window.veedmoAudioLoad[i]();
}
};
script.src = "//cdn.cronos.pw/cdn/audio/v1/current.js";
document.body ? document.body.appendChild(script) : document.head.appendChild(script);
}
window.veedmoAudio ? new window.veedmoAudio().runManual(j) : window.veedmoAudioLoad.push(function() {
new window.veedmoAudio().runManual(j);
});
} else {
setTimeout(veedmoEl, 100);
}
})();
})({
"partner_id": 1,
"query_selector": ".embedded-audio-player",
"insert_method": 0,
"autoplay": 1,
"ad_type": 1,
"audio_url": "https://cdn.veedmo-static.com/cdn/samples/audio/sample-audio.mp4",
"audio_title": "Listen to this article",
"tag_url_desktop": "https://cdn.veedmo-static.com/cdn/samples/ads/player-dev-ads/vast-audio-4.2-short.xml",
"tag_url_mobile": "https://cdn.veedmo-static.com/cdn/samples/ads/player-dev-ads/vast-audio-4.2-short.xml",
"position": 3,
"responsive": 1,
"corner": "bl",
"vertical_margin": 20,
"horizontal_margin": 20,
...
CSS
body {
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 1rem;
letter-spacing: 0.03rem;
line-height: 1.6;
background-color: #FAFAFA;
height: 3000px;
padding: 10px;
}
.embedded-audio-player {
max-width: 700px;
width: 100%;
}