- By Edmond Lau
- Highly Recommended 👍
- http://www.theeffectiveengineer.com/
- They are the people who get things done. Effective Engineers produce results.
| /*** 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 */ |
| <!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> |
| /** | |
| * 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. | |
| */ |
| /*! | |
| * 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: |