HTML5中通过JavaScript添加标记的方法及Tutor LMS搭配Plyr.io时视频标记全局启用的问题咨询

Let’s break down your two questions one by one—first adding HTML5 video markers with JavaScript, then restricting Plyr.io’s marker feature to specific videos in Tutor LMS.

Implementing basic video markers is straightforward with vanilla JS and HTML5. Here’s a step-by-step approach:

Step 1: Set Up the HTML & CSS #

Start with a wrapped video element and a container for markers, plus some basic styling to position markers correctly:

<div class="video-wrapper">
  <video id="targetVideo" controls>
    <source src="your-video-file.mp4" type="video/mp4">
  </video>
  <div id="markerContainer" class="marker-container"></div>
</div>

.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
}
.marker-container {
  position: absolute;
  bottom: 40px; /* Aligns with the video's progress bar */
  left: 0;
  right: 0;
  height: 12px;
}
.video-marker {
  position: absolute;
  width: 5px;
  height: 100%;
  background-color: #e74c3c;
  cursor: pointer;
  transform: translateX(-50%);
}

Step 2: JavaScript to Add & Manage Markers #

This code will dynamically create markers, position them based on video timestamps, and let users jump to those points on click:

const video = document.getElementById('targetVideo');
const markerContainer = document.getElementById('markerContainer');

// Define your markers (time in seconds, optional label for tooltips)
const videoMarkers = [
  { time: 15, label: 'Topic Introduction' },
  { time: 45, label: 'Key Demo' },
  { time: 90, label: 'Summary' }
];

// Create a single marker element
function buildMarker(marker) {
  const markerEl = document.createElement('div');
  markerEl.className = 'video-marker';
  
  // Calculate position relative to total video duration
  const positionPercent = (marker.time / video.duration) * 100;
  markerEl.style.left = `${positionPercent}%`;
  
  // Jump to timestamp on click
  markerEl.addEventListener('click', () => {
    video.currentTime = marker.time;
  });
  
  // Add tooltip on hover (optional)
  markerEl.title = `${marker.label} (${marker.time}s)`;
  
  return markerEl;
}

// Wait for video metadata to load before rendering markers
video.addEventListener('loadedmetadata', () => {
  videoMarkers.forEach(marker => {
    markerContainer.appendChild(buildMarker(marker));
  });
});

Right now, your code loads Plyr for all single course pages, which applies markers to every video. Let’s fix this with two targeted adjustments:

1. Refine When Plyr is Enqueued #

Instead of loading Plyr for every course, narrow it down to specific courses or videos. For example:

• Target specific course IDs: Replace the array values with your course IDs

  $allowed_courses = array(123, 456); // Your course IDs here
  $current_course_id = get_the_ID();
  
  if (is_single_course(true) && in_array($current_course_id, $allowed_courses)) { 
      wp_enqueue_style('tutor-plyr', tutor()->url . 'assets/packages/plyr/plyr.css', array(), TUTOR_VERSION); 
      wp_enqueue_script('tutor-plyr', tutor()->url . 'assets/packages/plyr/plyr.polyfilled.min.js', array('jquery'), TUTOR_VERSION, true); 
  }
  

• Use a custom field: Add a checkbox in your course edit screen (via Advanced Custom Fields or a custom snippet) to flag courses that need markers, then check for it:

  if (is_single_course(true) && get_post_meta(get_the_ID(), 'enable_plyr_markers', true)) { 
      wp_enqueue_style('tutor-plyr', tutor()->url . 'assets/packages/plyr/plyr.css', array(), TUTOR_VERSION); 
      wp_enqueue_script('tutor-plyr', tutor()->url . 'assets/packages/plyr/plyr.polyfilled.min.js', array('jquery'), TUTOR_VERSION, true); 
  }
  

2. Initialize Plyr Only on Specific Videos #

Even if you enqueue Plyr globally, you can limit initialization to videos with a specific class. Add this JS to your theme’s custom script or a plugin:

jQuery(document).ready(function($) {
  // Only initialize Plyr on videos with this class
  $('.plyr-with-markers').each(function() {
    new Plyr(this, {
      markers: {
        enabled: true,
        points: [
          { time: 10, label: 'Start' },
          { time: 30, label: 'Key Point' }
          // Add your marker points here
        ]
        // Add other Plyr options as needed
      }
    });
  });
});

Then, edit your Tutor LMS video elements and add the plyr-with-markers class to any video you want to enable markers for.

内容的提问来源于stack exchange，提问作者Jhon Textor