project Websites / videos.bentasker.co.uk avatar

websites/videos.bentasker.co.uk#3: Allow embedding without document.write()



Issue Information

Issue Type: issue
Status: closed
Reported By: btasker
Assigned To: btasker

Milestone: V0.19
Created: 11-Mar-22 15:44



Description

Currently, we embed a video by doing something like

<script type="text/javascript" src="https://videos.bentasker.co.uk/resources/embed/embed.min.js"></script><script type="text/javascript">// <![CDATA[
embedBensPlayer('2021/20210605_sparkler_b1_w_slowmo/sparkler_b1_w_slowmo.mp4_master.m3u8');
// ]]></script></p>

Which then relies on document.write() to be able to insert a player.

That approach works but causes issues (in jira-projects/CDN#13 and websites/BEN#8)

It'd be good if we could implement the ability to do it without document.write(), instead doing something like

<div class="bensvideo" data-src="2021/20210605_sparkler_b1_w_slowmo/sparkler_b1_w_slowmo.mp4_master.m3u8"></div>

<script type="text/javascript" src="https://videos.bentasker.co.uk/resources/embed/embed.min.js">

Where a function would (on DomReady) call getElementsByClassName) and write videos into the relevant div



Toggle State Changes

Activity


assigned to @btasker

This should be feasible.

The current function (embedBensPlayer) does

    document.write("<div id='BensplayerWrapper" + vidid + "' class='BensVideoCont'></div>");
    var c = document.getElementById('BensplayerWrapper'+vidid);

And then after that, everything references the element by ID, so we could build an alternative entry point that doesn't do that before handing off

verified

mentioned in commit e97ad98666dee46fc41c090584c4164190455788

Commit: e97ad98666dee46fc41c090584c4164190455788 
Author: B Tasker                            
                            
Date: 2022-03-11T16:03:27.000+00:00 

Message

Split embedBensPlayer() so that all it does directly is use document.write(). This is a precursor to adding a new entrypoint for websites/videos.bentasker.co.uk#3

+28 -11 (39 lines changed)
verified

mentioned in commit f55cec220b0e4cd6ab6118113f796a61d0302b27

Commit: f55cec220b0e4cd6ab6118113f796a61d0302b27 
Author: B Tasker                            
                            
Date: 2022-03-11T16:15:49.000+00:00 

Message

Implement function embedBensPlayerDivs() for websites/videos.bentasker.co.uk#3

This will

  • seek out any element with the class name embedBensPlayer
  • Pull the video url from attribute data-src
  • Insert a player

Example usage

<div class="embedBensPlayer" data-src="2017/201705_Lua_split_string/lua_string_split.mp4_master.m3u8"></div>
<script type="text/javascript">
    embedBensPlayerDivs();
</script>

The next step is to have it called automatically once the DOM is ready

+59 -0 (59 lines changed)

Commit f55cec22 implements function embedBensPlayerDivs() for websites/videos.bentasker.co.uk#3

This will

  • seek out any element with the class name embedBensPlayer
  • Pull the video url from attribute data-src
  • Insert a player

So to embed a video, you'd do

<div class="embedBensPlayer" data-src="2017/201705_Lua_split_string/lua_string_split.mp4_master.m3u8"></div>
<script type="text/javascript">
    embedBensPlayerDivs();
</script>

The next step is to have it called automatically once the DOM is ready

verified

mentioned in commit 475a508bf5598598767a4b2f248dc3a5faef244e

Commit: 475a508bf5598598767a4b2f248dc3a5faef244e 
Author: B Tasker                            
                            
Date: 2022-03-11T16:23:04.000+00:00 

Message

Automatically call embedBensPlayerDivs() when the DOM is ready, so that embedded videos are automatically picked up on. See websites/videos.bentasker.co.uk#3

+15 -0 (15 lines changed)
verified

mentioned in commit bca8897c2030999ced801c22dab14a60e9ea41f5

Commit: bca8897c2030999ced801c22dab14a60e9ea41f5 
Author: B Tasker                            
                            
Date: 2022-03-11T18:45:10.000+00:00 

Message

Prevent multiple dom ready events from being queued (related to websites/videos.bentasker.co.uk#3)

+6 -2 (8 lines changed)

mentioned in issue #5