Git Product home page Git Product logo

embedly-cortico-example's Introduction

Embedly Cortico Example

This project is an example of the cortico embed utilizing player.js. We use a stripped down version of our embed that only displays a button and uses or GlobalAudioContext (utilized for all LVN audio). We use the HTML5Adapter provided by player.js to allow our iframe to be modified by the parent site that is displaying it.

Issue

While doing this integration, we ran into an issue where our embed would not run appropriately on the player.js test site. Upon further investigation, we kept receiving an error from google stating DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD. This is because web browser do not allow autoplay of audio before the user interacts with the webpage. We were able to get the test to pass on Firefox, but not Chrome. However, the provided iframe src from player.js passes on Chrome. We are unable to tell why this occurs, but this application shows that their test src has the same issues when tested on a different site.

Running our Application

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The app should open and provide two links. The first link (Cortico) is the cortico url in an iframe. The second link is the player.js url in an iframe. The page runs a testsuite on load. in the Chrome browser, when clicking through the link, we see that both pass the test. When refreshing while on one of the pages, we get the Chrome play error.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.