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


11-Mar-22 15:44

assigned to @btasker


11-Mar-22 15:49

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


11-Mar-22 16:04
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)

11-Mar-22 16:18
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)

11-Mar-22 16:18

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


11-Mar-22 16:23
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)

11-Mar-22 18:45
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)

12-Mar-22 11:42

mentioned in issue #5