Recently, our Icecat Live JavaScript interface was updated with two new functions: play() and stop(). These functions allow Icecat Live users to create a custom video play button that will open a video in a new modal window, i.e., in a graphical control element subordinate to an application’s main window. Below is an example of how you could implement this functionality on your web app.
Firstly, add a <div> element with id=”modal” to your page. This will be the container for the modal window with the video. See the example below:
<div id="modal"> <div class="modal-wrapper"> <span id='close'>×</span> <div id='IcecatLive'></div> </div> </div>
Secondly, set the id=’myPlayButton’ to the element of your page that should open the modal window. In our example, the element type is <button>, but you can apply it to any other element on your page. For example, an image with a thumbnail of the video.
<button id='myPlayButton'>Play</button>
Next, insert the following line into the <head> element of your page:
<script src='<https://live.icecat.biz/js/live-current-2.js'> async></script>
Additionally, insert the following line just before the end of the <body> element of your page:
<script src="custom.js"></script>
Finally, copy custom.js into your project.
IMPORTANT: replace the shopname and icecat_id values with your own.
The most important functions in this example are: window.IcecatLive.trigger(‘videos:play’); and window.IcecatLive.trigger(‘videos:stop’), which start and stop the playing of the video.
The four steps above provide the basic configuration. As a result, the video below is shown. Furthermore, experienced developers can rename elements and modify styles according to the code style and visual requirements of their projects.
<!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <title>Button API usage</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src='https://live.icecat.biz/js/live-current-2.js' async></script> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <div class='wrapper'> <div id="modal"> <div class="modal-wrapper"> <span id='close'>×</span> <div id='IcecatLive'></div> </div> </div> <div> <button id='myPlayButton'>Play</button> </div> </div> <script src="custom.js"></script> </body> </html>
window.addEventListener('liveload', function () { window.IcecatLive.getDatasheet({'videos': '#IcecatLive'}, { 'shopname': 'openIcecat-live', 'icecat_id': '35598021' }, 'EN'); }) window.onload = function () { const playButton = document.querySelector('#myPlayButton') const closeButton = document.querySelector('#close') const modal = document.querySelector('#modal') playButton.addEventListener('click', function () { if (window.IcecatLive) { openModal() window.IcecatLive.trigger('videos:play'); } }); closeButton.addEventListener('click', function () { if (window.IcecatLive) { closeModal() window.IcecatLive.trigger('videos:stop'); } }) function closeModal() { modal.style.display = 'none'; } function openModal() { modal.style.display = 'block'; } }
.wrapper { position: relative; width: 100%; max-width: 720px; margin: 100px auto 25px; background-color: transparent; text-align: center; } button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; cursor: pointer; } #modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } #modal .modal-wrapper{ margin: auto; width: 80%; position: relative; } #close{ color: #fff; position: absolute; right: 20px; font-size: 40px; cursor: pointer; font-weight: bold; z-index: 1; } #close:hover, #close:focus { color: #000; text-decoration: none; cursor: pointer; } /* Override IcecatLive css*/ #videoTab{ display: none; }
Here you can download the working example to try it.
Read further: Manuals, News, JavaScript, manuals, video
Your email address will not be published. Required fields are marked *
Comment *
Name *
Email *
Website
Δ