├── README.md
├── LICENSE
└── clone-media-fragment.js


/README.md:
--------------------------------------------------------------------------------
 1 | Clone Media Fragment
 2 | ====================
 3 | 
 4 | This is a quick way to support URLs such as YouTube's time offset URLs. This snippet of Javascript will clone the page's Media Fragment to any embedded media on the page.
 5 | 
 6 | This is written in plain Javascript, and has no external dependencies.
 7 | 
 8 | Usage: Just include this Javascript file on your site. It will find any `<video>` and `<audio>` tags and set up the necessary event listeners.
 9 | 
10 | Background: https://aaronparecki.com/2017/02/19/4/day-61-media-fragments
11 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Aaron Parecki
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/clone-media-fragment.js:
--------------------------------------------------------------------------------
 1 | function cloneMediaFragment() {
 2 |   // Check that the fragment is a Media Fragment (starts with t=)
 3 |   if(window.location.hash && window.location.hash.match(/^#t=/)) {
 4 |     // Find any video and audio tags on the page
 5 |     document.querySelectorAll("video,audio").forEach(function(el){
 6 |       // Create a virtual element to use as a URI parser
 7 |       var parser = document.createElement('a');
 8 |       parser.href = el.currentSrc;
 9 |       // Replace the hash 
10 |       parser.hash = window.location.hash;
11 |       // Set the src of the video/audio tag to the full URL
12 |       el.src = parser.href;
13 |     });
14 |   }
15 | }
16 | 
17 | document.addEventListener("DOMContentLoaded", function() {
18 |   cloneMediaFragment();
19 |   // When the media is paused, update the fragment of the page
20 |   document.querySelectorAll("video,audio").forEach(function(el) { 
21 |     el.addEventListener("pause", function(event) {
22 |       // Update the media fragment to the current time
23 |       // Use replaceState to avoid triggering the "hashchange" listener above
24 |       history.replaceState(null, null, "#t=" + Math.round(event.target.currentTime));
25 |     });
26 |   });
27 | });
28 | 
29 | // If the user changes the hash manually, clone the fragment to the media URLs
30 | window.addEventListener("hashchange", cloneMediaFragment);
31 | 


--------------------------------------------------------------------------------