- By Edmond Lau
- Highly Recommended 👍
- http://www.theeffectiveengineer.com/
- They are the people who get things done. Effective Engineers produce results.
/*! | |
* Plugin extension for MediaElement.js to provide a synchronized transcript. | |
* | |
* Features: | |
* - Highlight word/phrase in transcript as audio/video is played, | |
* - Search for word, and seek to that point in media, | |
* - Click on word/phrase to jump to that point in media (in PROGRESS), | |
* - Auto-scroll of the transcript as media plays (in PROGRESS). | |
* | |
* TODOs: |
/** | |
* Web browsers use URIs for the href attribute of the <a> tag and for bookmarks. The URI scheme, such as http:, file:, or ftp:, specifies the protocol and the format for the rest of the string. | |
* Browsers also implement a prefix javascript: that to a parser is just like any other URI. | |
* Internally, the browser sees that the specified protocol is javascript, treats the rest of the string as a JavaScript application which is then executed, and uses the resulting string as the new page. | |
* | |
* The executing script has access to the current page, which it may inspect and change. | |
* If the script returns an undefined type (rather than, for example, a string), the browser will not load a new page, with the result that the script simply runs against the current page content. | |
* This permits changes such as in-place font size and color changes without a page reload. | |
*/ |
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Basic interactive video with HTML5 and vanilla JavaScript</title> | |
</head> | |
<body> | |
<!-- Read my blog post on interactive videos: https://mostlydevstuff.com/2018/basic-interactive-video-with-html5-and-javascript/ --> | |
<style> |
/*** Publishing: Hide things that aren't very useful for a read-only view */ | |
/** Hide page properties (public pages will always have public: true) */ | |
.content .pre-block { display: none; } | |
/** Title */ | |
/* Make title non-editable */ | |
#main-container .page-title { pointer-events: none; } | |
/** Hide useless sidebar stuff */ |