Project - Video Experience Improvements (v1)

Owned by Marco Morales
Last updated: Nov 13, 2023
9 min read

Status

Done

Contributing Team

@Marco Morales

Earlier Discovery

N/A

Linked Initiatives

Overview

This project delves into a set of video-related features that we aim to refine and enhance in the new version of our mobile app. These features will cater to the needs of both our learners and app providers. By grouping these video features under one umbrella. we ensure a focused approach to their development and integration, setting the stage for detailed exploration and collaboration in the subsequent sections.

Overview

This project delves into a set of video-related features that we aim to refine and enhance in the new version of our mobile app. These features will cater to the needs of both our learners and app providers. By grouping these video features under one umbrella. we ensure a focused approach to their development and integration, setting the stage for detailed exploration and collaboration in the subsequent sections.

Key Use Cases

As a Learner:

  • I often juggle multiple responsibilities, from work to personal commitments. I need the flexibility to learn on-the-go. With the Bulk Video Download feature, I can easily download an entire course's videos for offline viewing, ensuring uninterrupted learning even in areas with poor internet connectivity.

  • Additionally, as I navigate through course content, the transcript navigation feature allows me to tap on specific transcript sentences, seamlessly directing the video to the corresponding segment. This enhances my content interaction and comprehension.

  • Furthermore, I can elevate my learning experience by casting my lessons onto bigger screens via screen casting, or by adjusting my video playback quality with the Video Quality Setting feature, ensuring smooth and tailored content delivery.

As an Open edX Provider:

  • I'm constantly seeking ways to enhance user experience and reduce potential friction points. By offering users the ability to select their preferred download video size, I cater to diverse storage capacities and internet speeds, ensuring that users can always access content in a format that suits their device and connection.

  • Moreover, the integration of adaptive streaming for HLS Videos ensures that video playback is optimized in real-time based on the user's current internet speed, reducing buffering and ensuring a smooth viewing experience. This not only enhances user satisfaction but also positions our app as a reliable and user-centric platform in the competitive e-learning market.

Users

  • Learner: The primary user who will benefit from these video features, enhancing their learning experience.

  • App Provider: Ensures the app's functionality aligns with the proposed features and meets user expectations. Additionally, the app provider has the capability to configure and customize the video features they wish to offer, tailoring the experience based on their users' needs.

In Scope / Out of Scope

Based on the above use cases, we are breaking down on high-level scope as follows:

In Scope

Out of Scope

Screen Casting: Ability for users to cast videos from the mobile app to other connected devices. Display of a casting icon recognizable to users. Support for popular casting technologies like Chromecast and Airplay. Background casting, allowing users to multitask on their device.

Note Taking: Ability for users to take notes while watching videos. Mapping notes to specific timestamps in the video.

Transcript Navigation: Display of video transcripts with active sentence highlighting. Tapping on transcript sentences to navigate to the corresponding part of the video. Option to expand the transcript section for easier navigation. Mechanism to quickly return to the current active sentence after scrolling.

Search in Transcript: Functionality to search for specific words or phrases within the video transcript. Highlighting and navigation based on search results.

Download Video Size Options: Multiple video quality options for download. Display of estimated file size for each quality option. Background download capability with progress indication. Error handling and notifications for download status.

Cloud Integration: Ability for users to save videos or notes directly to cloud storage platforms like Google Drive or Dropbox.

Bulk Video Download: Interface for users to select multiple videos for download. Queue system for managing and viewing download progress. Storage checks before initiating downloads.

Interactive Video Features: Quizzes or polls embedded within videos. Interactive hotspots within videos that can provide additional information or links.

Video Quality Setting & Adaptive Streaming: Range of video quality settings for users to choose from. Implementation of adaptive streaming to adjust video quality based on network conditions. User feedback mechanisms for quality changes.

Offline Mode Enhancements: Advanced offline mode where users can interact with transcripts, take quizzes, or engage with other interactive elements without an internet connection. (This will be handled by a separate future project.)

 

Advanced User Profiles: User history tracking for videos watched, paused, or skipped.

MVP Specs

Features & Requirements

In order to realize this MVP, we believe the following features will be required. Refer to the following flow chart for more details:

Feature

Requirements

Screen Casting

  • Compatibility: Should be compatible with a wide range of devices, including smart TVs, laptops, tablets, and other mobile devices. Must support both Android and iOS.

  • Ease of Use: User-friendly with clear in-app instructions. Utilize a commonly recognized icon for screen casting.

  • Quality: Provide an option to adjust video quality with a default set to auto.

  • Stability: Ensure stable and uninterrupted casting.

  • Multitasking: Allow users to navigate their phone (e.g., taking notes) while screen casting.

  • Floating window: Videos should transition to a floating window when users navigate to other sections of the app or even when they switch to other applications on their device. This ensures that the video playback continues uninterrupted, allowing users to multitask effectively.

  • Lock Screen Widget: Integrate a widget for easy access and control during screen lock.

Transcript Navigation

  • Transcript Area Dimensions: By default, the transcript area should occupy a height equivalent to 1/3 of the video width. Users should have the option to expand the transcript area via settings, where it functions similarly to subtitles.

  • Active Sentence Display and Highlighting: In the default mode, the active sentence (currently spoken in the video) should always be positioned at the top of the transcript area. In the expanded transcript mode, while the active sentence can still start at the top, users should have the ability to scroll up and down. The active sentence should have enhanced contrast compared to inactive sentences, possibly through distinct background colors, font weight adjustments, or a combination of both. Ensure compatibility with both light and dark themes.

  • Smooth Transition: Ensure a seamless transition between sentences, eliminating jarring movements.

  • Navigation via Transcript: In the expanded mode, users should be able to tap on any part of the transcript to navigate to that specific segment of the video.

  • Full-Screen Mode: When the video is in full-screen mode, there should be a button to view the transcript. Upon activation, the transcript should overlay on the right side of the screen, allowing users to view both the video and transcript simultaneously.

  • Timestamps: Optionally, introduce timestamps next to each sentence or paragraph.

  • Search in Transcript (Out of Scope): Implement a search functionality within the transcript. Highlight searched words or phrases throughout the transcript, and allow users to click on them to navigate to the corresponding video segment.

Transcript Navigation

  • Transcript Area Dimensions: By default, the transcript area should occupy a height equivalent to 1/3 of the video width. Users should have the option to expand the transcript area via settings, where it functions similarly to subtitles.

  • Active Sentence Display and Highlighting: In the default mode, the active sentence (currently spoken in the video) should always be positioned at the top of the transcript area. In the expanded transcript mode, while the active sentence can still start at the top, users should have the ability to scroll up and down. The active sentence should have enhanced contrast compared to inactive sentences, possibly through distinct background colors, font weight adjustments, or a combination of both. Ensure compatibility with both light and dark themes.

  • Smooth Transition: Ensure a seamless transition between sentences, eliminating jarring movements.

  • Navigation via Transcript: In the expanded mode, users should be able to tap on any part of the transcript to navigate to that specific segment of the video.

  • Full-Screen Mode: When the video is in full-screen mode, there should be a button to view the transcript. Upon activation, the transcript should overlay on the right side of the screen, allowing users to view both the video and transcript simultaneously. When a video is playing in portrait mode, and the device is rotated into landscape mode automatically shift to full-screen mode.

  • Timestamps: Optionally, introduce timestamps next to each sentence or paragraph.

  • Search in Transcript (Out of Scope): Implement a search functionality within the transcript. Highlight searched words or phrases throughout the transcript, and allow users to click on them to navigate to the corresponding video segment.

Download Video Size Options

  • Multiple Quality Options: Provide users with multiple video quality options for download, such as Low (240p), Medium (480p), High (720p), and Ultra (1080p). This ensures users can choose a size that suits their device storage and network conditions.

  • Estimated File Size Display: Before confirming the download, display an estimated file size for each quality option, helping users make informed decisions based on their available storage.

  • Download Quality Setting: Allow users to set a default download quality in the app settings, streamlining the download process for future videos.

Bulk Video Download

  • Selection Mechanism: Provide users with an intuitive interface to select multiple videos for download. This could be checkboxes next to each video or a "Select All" option.

  • Download Queue: Once videos are selected, they should be added to a download queue. Users should be able to view the queue, pause individual downloads, or reorder the download sequence.

  • Storage Check: Before initiating the download, the app should check for sufficient storage space. If space is insufficient, notify the user and suggest actions (e.g., clear space or download in lower quality). 

  • Progress Indicator: Display a progress bar or percentage indicator during the download process, giving users a clear idea of the download's progress and estimated completion time. 

  • Error Handling: Implement robust error handling mechanisms. If a download fails due to network issues or other reasons, provide users with a clear error message and the option to retry.

  • Background Download: Allow videos to continue downloading in the background if users navigate away from the app or lock their device. Display a download progress bar at the bottom of the screen to keep users informed.

  • Download Notifications: If an error occurs during the download, display an error message (dismiss them manually.) Users should have the option to click on "View Error" and “Retry” which will redirect them to the download page for more details or download again. Upon successful completion of the download, display a "Download Complete" message. This message should be visible for 5 seconds and then automatically close out.

  • Download Management: Within the app, provide a section where users can view, manage, or delete their downloaded videos.

Video Quality Setting & Adaptive Streaming

  • Quality Options: Provide users with a range of video quality settings, such as Low (240p), Medium (480p), High (720p), and Ultra (1080p). Users should be able to change the quality manually based on their preferences and network conditions.

  • Video Quality Configuration: If a learning site supports HLS adaptive videos, also show “Automatic (Recommended)” as a quality option, and make this the default. If a learning site has different quality settings, they should be able to override these values in their configuration.

  • Default Quality: Allow users to set a default video quality in the app settings, ensuring a consistent playback experience.

  • Adaptive Streaming: Support adaptive streaming (if transcoded video files available) to automatically adjust video quality based on the user's current network conditions. This ensures smooth playback even under fluctuating network speeds.

  • User Feedback: Provide visual feedback when the video quality changes, such as a brief overlay message indicating the new resolution. This keeps users informed about the playback quality.

  • Bandwidth Consumption: Provide users with information about the estimated data usage for each quality setting, helping them make informed decisions, especially when using mobile data.

Note-Taking

(Not in scope, but left for general visibility)

  • Accessibility: Users should easily access the note-taking feature via a recognizable 'Note' icon while watching a video.

  • Floating Video: Upon activating the note-taking feature, the video should transition into a floating window, allowing users to view the video and take notes simultaneously.

  • Timestamps: Each note should automatically have a timestamp indicating the exact point in the video when the note was taken. This allows users to reference specific parts of the video based on their notes.

  • Single Note File: Each video should be associated with a single note file, ensuring organized and easy access to notes for each video.

  • Interactive Floating Window: Users can click on the floating video window to return to the full-screen video view.

Feature behavior

  1. X

Technical Open Questions

We anticipate the following to some of the key questions that we will need answered during technical discovery. 

  • How will the new features impact the overall performance and responsiveness of the app?

  • Are there any potential security concerns or vulnerabilities introduced with these new features, especially around downloading and streaming content?

  • Are there any latency concerns when users tap on a transcript segment to navigate to a specific video timestamp?

  • When users are scrolling up and down the transcript, what mechanism will be implemented to bring them back to the current active sentence? Would it be a button, an automatic scroll, or some other user interface element?

  • How will these features integrate with existing functionalities in the app, and are there any potential conflicts?

  • Are there any device-specific challenges, especially when considering different mobile operating systems, versions, and device capabilities?

Open Tasks

  • UI/UX for the new video features

  • Backend support for serving different video file sizes

  • Testing on various devices for screen casting compatibility

UI Examples

Designs coming soon!