Another issue with Google Apps Script is about shown video on sidebar area.
See also the old projects with google apps scripts.
NOTE: You can add using this way many info and data (info from google and document, maps, HTML info, and more).
Let’s start with a new project and a new document from google drive.
I named the project and the HTML file from the project with Video_online.
First, the Code.gs file come with this source code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | /* What should the add-on do after it is installed */ function onInstall() { onOpen(); } /* What should the add-on do when a document is opened */ function onOpen() { DocumentApp.getUi() .createAddonMenu() // Add a new option in the Google Docs Add-ons Menu .addItem("Video online", "showSidebar") .addToUi(); // Run the showSidebar function when someone clicks the menu } /* Show a 300px sidebar with the HTML. */ function showSidebar() { var html = HtmlService.createTemplateFromFile("Video_online") .evaluate() .setTitle("Video online"); // The title shows in the sidebar DocumentApp.getUi().showSidebar(html); } |
I add a new HTML file named Video_online with this source code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!-- use CSS stylesheet - default Google Docs styles --> <link href="https://ssl.gstatic.com/docs/script/css/add-ons.css" rel="stylesheet"> <!-- load the jQuery library from the Google CDN --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script> <!-- create sidebar to add logos --> <div class="sidebar"> <video id="video" width="280" height="200" controls> <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type='video/mp4'> Your browser does not support the video tag. </video> <button id="play" onclick="google.script.run.PlayVideo()">Play</button> <script> $("#play").click(function() { $("#video")[0].play(); }); </script> </div> |
You can see into source code I used an external link to a known video from Blender 3D.
This example is a simple one:
- create the add-on, see: onInstall, onOpen and showSidebar functions.
- run the HTML and play a video with the video area and button javascript.
This is the result of my add-on:
