We need to move videos from Brightcove to now be viewed on Azure. We need to include any of the current features and functions that users have when we transition to Azure.
Moving videos from Brightcove to be viewed on Azure involves a migration process that includes transferring the video files, configuring the necessary services in Azure, and ensuring a seamless playback experience for users. Here's a step-by-step guide to help you with this migration:
Assessment and Planning:
Identify all the videos currently hosted on Brightcove that need to be migrated.
Determine the file formats, resolutions, and other technical details of the videos.
Plan the migration timeline, considering any potential downtime or impact on users.
Content Transfer:
Download the video files from Brightcove. You may need to use Brightcove's API or download options to retrieve the original video files.
Organize the videos into appropriate folders or storage containers on your local system.
Azure Setup:
Log in to your Azure portal and create a new storage account if you don't have one.
Create containers or folders within the storage account to store the videos. Azure Blob Storage is commonly used for this purpose.
Upload to Azure:
Use Azure's tools, APIs, or third-party tools to upload the videos from your local system to the Azure Blob Storage containers.
Make sure to maintain the original directory structure and file names if possible. This will help with organization and ease of migration.
Configure Video Streaming:
Azure offers different services for video streaming. Azure Media Services is a comprehensive platform for video encoding, streaming, and content protection.
Set up an Azure Media Services account if you don't have one.
Create an Asset within Azure Media Services for each video. This asset will hold the encoded video and associated metadata.
Encoding and Transcoding:
If the original video files are not in the appropriate format or resolution for streaming, you'll need to use Azure Media Services' encoding capabilities to transcode them into adaptive streaming formats like HLS or MPEG-DASH.
Configure encoding settings based on your requirements, such as bitrates, resolutions, and streaming protocols.
Video Playback Integration:
Implement the necessary code on your website or application to embed and play the videos from Azure. Azure Media Player is a commonly used player for streaming videos from Azure Media Services.
Use the URLs provided by Azure Media Services to reference and play the videos.
Testing and Quality Assurance:
Test the video playback across different devices, browsers, and network conditions to ensure a smooth and consistent experience.
Verify that the migration was successful and that all videos are accessible and playable from Azure.
User Communication:
Inform your users or audience about the migration to Azure for video hosting and provide any necessary instructions on accessing the videos.
Monitoring and Optimization:
Set up monitoring tools to track video usage, performance, and user engagement.
Continuously optimize your Azure configuration and encoding settings for the best streaming experience.
Remember that the specifics of the migration process may vary based on your organization's requirements, the number and size of videos, and your technical expertise. It's recommended to work closely with your IT and development teams or consider consulting with Azure experts to ensure a successful and smooth migration.
Viewing the Video
User Story:
As a new or current user who is viewing the videos for ABA, I need to have the same functions from the video player as I did prior to transition to Azure so that my experience with the product will remain consistent.
UI:
User clicks on Watch Training button for the video they would like to see.
User sees the video begin playing upon clicking watch video button.
Acceptance Criteria:
The video functionality includes:
User can start the video by clicking on Watch Training button for the specific video they want to see and we will begin playing the video. (See image: Watch Training)
User can pause the video
Given the video is playing, then we will show the pause symbol. (See image: Pause symbol)
Given user hovers over the pause symbol, then we will show the word: Pause.
Given user clicks on the pause symbol, then we will pause the video.
User can resume the video.
Given a video is paused, then we will show the Play Symbol. (See #1 from image: Features)
Given user hovers over the play button, then we will show the word: Play.
Given user clicks on the play button, then we will resume the video.
User sees a preview section. (See #2 from image: Features)
Given there are more than 2 sections to a video, then we will show a scroll bar in the preview section. (See #3 from image: Features)
Preview section contains a time stamp of the duration for the specific portion of the video. (See #4 from image: Features)
The preview section shows the heading: ‘Now Playing’ that indicates which part of the video the user is currently watching. (See #5 from image: Features)
The preview section shows the heading: ‘Up Next’ that indicates the next section that will play.(See # 6 from image: Features)
Given the user does not select any specific portion of the video from the preview section, then the video automatically plays from beginning to ending.
Given user clicks on a portion of the video from the preview section, then we will stop what is currently playing and jump to the selected portion of video and show it to the user from the beginning of the selected portion.
Given the user clicks on a portion of the video, then the heading of that video will read: ‘Now Playing’
Given the user clicks on a portion of the video from the preview section, then the next portion of the video will show the heading: ‘Up Next’.
User can reveal the functionality of the video player. (See image: Pause symbol)
Given user hovers over the video, then we will show the customization functionality of the video player including:
Play/Pause symbol
Mute symbol
Progress bar for video
Ongoing continuous timer with the total time for the portion of the video selected. (See image: Pause symbol. Look at 0:24 / 1:09 or #7 from image: Features)
Closed caption symbol
Settings symbol
Picture-in-Picture symbol
Full Screen Symbol
Video Player: User Customization Functionality
User Story:
As a new or current user who is viewing the videos for ABA, I need to be able to customize my experience so that I can receive instruction in a modality that is most suited to my needs.
UI:
To reveal video player functionality, user hovers over the video.
To mute the video, user click on mute symbol.
To restore sound, user clicks on mute symbol a second time.
To replay or advance portions of a video, user clicks on the progress bar and moves it to desired location and then clicks play.
To adjust Closed Captions, user hovers than clicks on their desired changes.
To adjust the closed captions settings, user clicks on caption settings from menu and is shown the options.
To adjust the settings, user hovers over setting symbol and makes a selection.
Acceptance Criteria:
Customizations include:
Play / Pause / Replay
See Section: Viewing the video for Play and Pause functionality.
Given user has reached the end of a section of a video, they will see a replay symbol in place of the Play / Pause symbol. (I couldn’t capture this image-sorry)
Given user selects the replay symbol, then the selected video section will replay.
Mute symbol
The default setting is Audio on.
The default language is English.
Given the user clicks on the Mute symbol, then we will no longer play the audio. (See image: No Audio)
Given user clicks on the Mute symbol a second time, then the sound is restored.
Progress Bar for Video
Given user clicks on the progress bar for video and drags it, they can advance and / or replay parts of the video when they click on play symbol. (See image: Progress Bar)
Ongoing Continuous timer
Given user has moved the progress bar, then the ongoing timer will reflect the change when the play symbol is selected.
Closed Caption Symbol
Given the user makes changes to the closed caption settings, then we will save their changes.
The default setting is Captions Off.
Given user selects English, then we will show the closed captions in English.
Given user selects Spanish, then we will show the closed captions in Spanish.
Given user selects Caption Settings, we will show the setting options. (See image: Closed Caption Default Settings)
Text colors include: White, Black, Red, Green, Blue, Yellow, Magenta, Cyan.
Text view includes: Opaque, Semi-Transparent
Background colors include: Black, White, Red, Green, Blue, Yellow, Magenta, Cyan.
Background views include: Opaque, Semi-Transparent, Transparent.
Window colors include: Black, White, Red, Green, Blue, Yellow, Magenta, Cyan.
Window views include: Transparent, Semi-Transparent, Opaque.
Font Size include: 50%, 75%. 100%, 125%, 150%, 175%, 200%, 300%, 400%
Text edge style includes: None, Raised, Depressed, Uniform, Dropshadow
Font Family includes: Proportional Sans-Serif, Monospace San-Serif, Proportional Serif, Monospace Serif, Casual, Script, Small Caps
Settings Symbol
Default setting is Auto.
Setting options include: 720p, 540p, 360p, 270p.
Testing
User Story:
UI:
Acceptance Criteria: