Skip to content

Feature / Video tracking #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
shadman-ahmed-bs23 wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Feature / Video tracking #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cdcbe6b
Add latest video tracking code
shadman-ahmed-bs23 Jan 7, 2022
5a316e5
Add video tracking feature with required styling
shadman-ahmed-bs23 Jan 10, 2022
4aeca24
Update minor styling changes to the player
shadman-ahmed-bs23 Jan 15, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion amd/build/brightcove.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion amd/build/brightcove.min.js.map
View file
Open in desktop

Large diffs are not rendered by default.

77 changes: 47 additions & 30 deletions amd/src/brightcove.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,30 +21,38 @@ define(['jquery','core/ajax'], function ($, Ajax) {
waitSeconds: 30
});
}

const disableForwardScrubbing = function(player) {
return {
// +++ Implement setSource() +++
setSource: function setSource(srcObj, next) {
next(null, srcObj);
},
// +++ Alter the setCurrentTime method +++
setCurrentTime: function setCurrentTime(ct) {
const percentAllowForward = 50,
// Determine percentage of video played
percentPlayed = player.currentTime() / player.duration() * 100;
// Check if the time scrubbed to is less than the current time
// or if passed scrub forward percentage
if ( ct < player.currentTime() || percentPlayed > percentAllowForward ) {
// If true, move playhead to desired time
return ct;
}
// If time scrubbed to is past current time and not passed percentage
// leave playhead at current time
return player.currentTime();
}

const disableCompletionButton = (isCompleteAble) => {
const markCompleteBtn = document.getElementById('btn-completion');
if (markCompleteBtn){
markCompleteBtn.disabled = !isCompleteAble;
}
};

}

// const disableForwardScrubbing = function(player) {
// return {
// // +++ Implement setSource() +++
// setSource: function setSource(srcObj, next) {
// next(null, srcObj);
// },
// // +++ Alter the setCurrentTime method +++
// setCurrentTime: function setCurrentTime(ct) {
// const percentAllowForward = 95,
// // Determine percentage of video played
// percentPlayed = player.currentTime() / player.duration() * 100;
// // Check if the time scrubbed to is less than the current time
// // or if passed scrub forward percentage
// if ( ct < player.currentTime() || percentPlayed > percentAllowForward ) {
// // If true, move playhead to desired time
// return ct;
// }
// // If time scrubbed to is past current time and not passed percentage
// // leave playhead at current time
// return player.currentTime();
// }
// }
// };

/**
* Common event listener for brightcove Player.
Expand Down Expand Up @@ -84,9 +92,9 @@ define(['jquery','core/ajax'], function ($, Ajax) {
if(duration >= currentTime){
player.currentTime(currentTime);
}
// else {
// player.currentTime(duration - 1);
// }
else {
disableCompletionButton(false);
}
}else {
console.info(`Video progress is ${progress}`);
}
Expand Down Expand Up @@ -146,7 +154,7 @@ define(['jquery','core/ajax'], function ($, Ajax) {
methodname: 'mod_html5player_get_module_progress',
args: {
id: html5player.cmid, // course module id.
videoid: html5player.video_id, // html5videos table PK.
videoid: html5player.video_id, // html5player_html5videos table PK.
}
}]);

Expand Down Expand Up @@ -210,6 +218,11 @@ define(['jquery','core/ajax'], function ($, Ajax) {
player.on('loadedmetadata', function(e){
console.info('Single video player meta data loaded...')
get_single_video_course_module_progress(player,html5player);
console.log(html5player.forwardscrubbing);
if (+html5player.forwardscrubbing){
console.info('Forward scrubbing enabled. Progress control disabling using css...');
$(".vjs-progress-control").css('pointer-events','none');
}
});
}

Expand All @@ -223,17 +236,19 @@ define(['jquery','core/ajax'], function ($, Ajax) {

player.on('ended',(e)=>{
const currentTime = Math.ceil( player.duration());
console.log(`Video ended... Video id: ${player.mediainfo.id}, Duration: ${player.duration()}`)
console.log(`Video ended... Video id: ${player.mediainfo.id}, Duration: ${player.duration()}`);
set_course_module_progress(html5player, html5player.cmid,html5player.video_id,currentTime,true)
player.clearInterval(interval);
// if (!html5player.cmcompleted){
// disableCompletionButton(true);
// }
})
}

/**
* On load playlists meta data
* @param player
* @param html5player
* @param onpageload
*/
const html5playerOnLoadPlaylistMetaData = (player, html5player) => {
player.on('loadedmetadata',(e) => {
Expand Down Expand Up @@ -267,13 +282,14 @@ define(['jquery','core/ajax'], function ($, Ajax) {
// const initBrightCovePlayer = (course, cm, accountId, playerId, video_id) => {
const initBrightCovePlayer = (html5player) => {
html5player = JSON.parse(html5player);
disableCompletionButton(false);
// Make brightcove js in Require js module as bc.
loadBrightCoveJs(html5player.account_id, html5player.player_id);

require(['bc'], function(bc) {

// Register the middleware with the player
videojs.use('*', disableForwardScrubbing);
//videojs.use('*', disableForwardScrubbing);

console.info(`Brightcove player js loaded...`);
// Tracking is enabled for only student.
Expand All @@ -284,6 +300,7 @@ define(['jquery','core/ajax'], function ($, Ajax) {
// Do meta loaded stuffs here.
console.info('User is a student and Video type single video...');
html5playerOnLoadSingleVideoMetaData(myPlayer, html5player);
disableCompletionButton(false);
// Do Start playing stuffs here.
html5playerOnPlaySingleVideo(myPlayer,html5player);
}else if( html5player.video_type == VIDEO_TYPE_PLAYLIST) {
Expand Down
35 changes: 28 additions & 7 deletions backup/moodle2/backup_html5player_stepslib.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,25 +39,46 @@ protected function define_structure() {
$userinfo = $this->get_setting_value('userinfo');

// Define each element separated
$page = new backup_nested_element('html5player', array('id'), array(
$html5player = new backup_nested_element('html5player', array('id'), array(
'name', 'display', 'displayoptions', 'tobemigrated', 'intro', 'introformat','meta_info', 'account_id', 'player_id',
'video_type', 'video_id','playlist_id','sizing','aspect_ratio','units','width','height'
));

// Build the tree
// (love this)
$html5videos = new backup_nested_element('html5videos');

$html5video = new backup_nested_element('html5video', array('id'), array(
'html5player', 'video_id', 'poster', 'thumbnail', 'duration', 'timecreated', 'timemodified'));

$html5trackings = new backup_nested_element('html5trackings');

$html5tracking = new backup_nested_element('html5tracking', array('id'), array(
'html5player', 'html5video', 'user', 'progress', 'timecreated', 'timemodified'));


// Build the tree.

$html5player->add_child($html5videos);
$html5videos->add_child($html5video);

$html5player->add_child($html5trackings);
$html5trackings->add_child($html5tracking);


// Define sources
$page->set_source_table('html5player', array('id' => backup::VAR_ACTIVITYID));
$html5player->set_source_table('html5player', array('id' => backup::VAR_ACTIVITYID));

$html5video->set_source_table('html5player_html5videos', array('html5player' => backup::VAR_PARENTID));
if($userinfo) {
$html5tracking->set_source_table('html5player_html5trackings', array('html5player' => '../../id'));
}
// Define id annotations
// (none)

// Define file annotations
$page->annotate_files('mod_html5player', 'intro', null); // This file areas haven't itemid
$page->annotate_files('mod_html5player', 'content', null); // This file areas haven't itemid
$html5player->annotate_files('mod_html5player', 'intro', null); // This file areas haven't itemid
$html5player->annotate_files('mod_html5player', 'content', null); // This file areas haven't itemid

// Return the root element (html5player), wrapped into standard activity structure
return $this->prepare_activity_structure($page);
return $this->prepare_activity_structure($html5player);
}
}
32 changes: 32 additions & 0 deletions backup/moodle2/restore_html5player_stepslib.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,13 @@ class restore_html5player_activity_structure_step extends restore_activity_struc
protected function define_structure() {

$paths = array();
$userinfo = $this->get_setting_value('userinfo');

$paths[] = new restore_path_element('html5player', '/activity/html5player');
$paths[] = new restore_path_element('html5player_html5videos', '/activity/html5player/html5videos/html5video');
if ($userinfo) {
$paths[] = new restore_path_element('html5player_html5trackings', '/activity/html5player/html5trackings/html5tracking');
}

// Return the paths wrapped into standard activity structure
return $this->prepare_activity_structure($paths);
Expand All @@ -56,6 +62,32 @@ protected function process_html5player($data) {
$this->apply_activity_instance($newitemid);
}

protected function process_html5player_html5videos($data) {
global $DB;

$data = (object)$data;
$oldid = $data->id;

$data->html5player = $this->get_new_parentid('html5player');

$newitemid = $DB->insert_record('html5player_html5videos', $data);
$this->set_mapping('html5player_html5video', $oldid, $newitemid);
}

protected function process_html5player_html5trackings($data) {
global $DB;

$data = (object)$data;

$data->html5player = $this->get_new_parentid('html5player');
$data->html5videoid = $this->get_mappingid('html5player_html5video', $data->optionid);
$data->user = $this->get_mappingid('user', $data->user);

$newitemid = $DB->insert_record('html5player_html5trackings', $data);
// No need to save this mapping as far as nothing depend on it
// (child paths, file areas nor links decoder)
}

protected function after_execute() {
// Add html5player related files, no need to match by itemname (just internally handled context)
$this->add_related_files('mod_html5player', 'intro', null);
Expand Down
2 changes: 1 addition & 1 deletion classes/external.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,7 +225,7 @@ public static function html5player_get_progresses(int $id)
$html5player = html5player_get_html5player_from_cm($id);
$params['html5player'] = $html5player->id;
$sql = "SELECT v.video_id, v.duration , IF(v.duration <= t.progress, true, false) as completed, t.*
FROM {html5videos} v LEFT JOIN {html5tracking} t ON v.id = t.html5videoid
FROM {html5player_html5videos} v LEFT JOIN {html5player_html5trackings} t ON v.id = t.html5videoid
WHERE v.html5player = :html5player AND t.user = :userid ORDER by completed ASC, t.html5videoid ASC";

$progresses = $DB->get_records_sql($sql, $params);
Expand Down
Loading