Build a basic elearning platform with one List (not supported by Microsoft yet) - Fedes365/Microsoft-Lists-Templates GitHub Wiki

UPDATE 01/06/2022

This solution should be still considered as a further experiment (see previous wiki page), given that iframes capability isn't officially documented in Microsoft Docs yet and an issue review has been submitted here: https://github.com/SharePoint/sp-dev-docs/issues/8004

ABOUT THIS SOLUTION

This tutorial will guide you to the creation of a basic elearning solution. The JSON code is based on a simple process: users watch 8 training videos and take a final quiz made with Microsoft Forms. The mp4 videos must be stored in a SharePoint document library (NO OneDrive for Business). Therefore, to make everything work, users expected to watch those videos should have at least reading access to the library or folder where they are stored. This template has been tested with a 1920x1080 screen resolution.

How to:

1) VIDEO UPLOADING: upload eight mp4 videos to a folder of a SharePoint document library and take note of their respective direct link (or path), as shown in the image below:

2) EXCEL FILE AND DATA ENTRY: download the Excel file provided here. The Excel file includes some formulas to make it easier to use: enter the information required, based on the description inside each cell of column A. You'll notice that column C - E - G and so on will autocomplete thanks to the formulas. In fact, those are the descriptions that will appear on the buttons of the right pane to be used as playlist (see image below).

Each row is a record of Microsoft Lists that includes the information of the other records, so that it's possible to access a video from the playlist of the right pane, thanks to their filtered URLs read by the JSON code. U and V columns of the Excel file must be left blank, except for U10 and V10 cells, so that a final quiz banner will appear on the last record corresponding to the last video of the playlist.

3) EXCEL FILE UPLOAD: upload the Excel file in a SharePoint site document library.

4) CREATE NEW LIST FROM EXCEL: create a new list from the Excel file you've just uploaded and follow the wizard process: each column expected to contain a URL must be "Multiple lines of text" without RTF feature. The other ones will contain buttons descriptions, so you can leave the standard "Single line of text" type.

5) CREATE GALLERY VIEW: create a new gallery view that will display all the records and give it a name, for example "All videos". Set it temporarily as default view and refresh the page so that it ends with "All%20Videos.aspx" (or any other name you choosed).

6) FILTER AND GET URLs: at this point you have 2 browser tabs with the same default view URL (ending with "All%20Videos.aspx" or any other name). Use one browser tab to filter by Title, then copy the corresponding filtered URL and paste it into the other tab where the list view has been opened in grid mode. You have to paste the filtered URL into the corresponding column, by repeating it for each record (see the following images below):

As you can see above, if you use the filter to retrieve the record of video number 1 (first browser tab), then you have to paste the URL into its corresponding column named "FILTERED-URL-VIDEO-1" by using the grid mode (second browser tab). Repeat this copy-paste operation for each video.

7) PASTE MP4 DIRECT LINK: copy the direct links of the mp4 files you took note before (step 1) and paste each one of them into the column named "FILE-DIRECT-LINK" (based on my example).

8) THE JSON CODE: exit from grid view and close the other tab you used to filter, because you don't need it anymore. Copy the JSON code available here and paste it into the view formatting box (Advanced formatting mode):

9) AUTOPLAY WORKAROUND FOR A BETTER USER EXPERIENCE: you may notice that all videos are now playing at the same time... DON'T PANIC. This is normal due to the autoplay behaviour of videos stored in SharePoint. To solve this issue, filter the first record used as course overview (the one with a cover displayed in its iframe as described in my Excel file), save it as new view with "Course Overview" name (or any other you want). Set this view as default and refresh.

CONCLUSION: users will always open the "Course Overview" list view because it has been set as default view. This introductory view displays a course cover inside an iframe and it's required to avoid simultaneous autoplay of all videos. Users can move across videos by selecting them from the right pane, which works as a playlist. Thanks to iframes, it's possible to use Microsoft Lists to deliver many digital contents... including mp4 videos.