Video. Add / edit video

Similar documents
HTML 5 and CSS 3, Illustrated Complete. Unit K: Incorporating Video and Audio

Encoding Video for the Web

IDM 221. Web Design I. IDM 221: Web Authoring I 1

Important Encoder Settings for Your Live Stream

Interactive feature: HTML5 video for

Premiere Pro Export Settings

TECHNICAL GUIDELINES FOR DIF CONTRIBUTORS

GoREACT Instructor FAQs

How Libre can you go?

Tips for Submitting a Kaltura Media Assignment

CONTENTS. System Requirements FAQ Webcast Functionality Webcast Functionality FAQ Appendix Page 2

Contents. Getting Set Up Contents 2

Create, Add, and Manage Videos

Flash, Video. How to add Flash movies into your site How to add video and audio to your site HTML5 <video> and <audio> elements

Lesson 5: Multimedia on the Web

Image and video processing

2015 / 11/ 11 Version 1.6

Meeting Visuals UCF Toolkit User Guide

Tablet 300x x x x1024

Online Help Browser Requirements Safari *Please note: Episode 7 does not support OS X or previous versions of Mac OS X.

Dimo FLV Video Converter for Mac is an all-in-one Mac FLV conversion software. It can help convert FLV files to almost all video and

HTML5: MULTIMEDIA. Multimedia. Multimedia Formats. Common Video Formats

GETTING STARTED 8 December 2016

ECA Video Submission Guide for Student

Specifications for a Locally hosted Planet estream Secure Video Platform

Revision 4.1.x /2.x.x [ ] Creating Media for Modulo Player & Kinetic

VIDEO UPLOAD SPECIFICATIONS FOR EMMY AWARD SUBMISSIONS:

DVS-200 Configuration Guide

mymedia Objectives Instructor Getting The Center Fall 2013 System Operation, mycourses Integration, and Podcasting

ADAPTIVE STREAMING AT. Justin Ruggles Lead Engineer, Transcoding & Delivery

Switch Release Notes. Switch

MediaServer WebStudio user manual

Lesson 5: Multimedia on the Web

Dimo MKV Video Converter for Mac is Mac MKV Converter to help you convert MKV files to MOV, WMV, MP4, MKV, etc. for editing,

Compression and File Formats

PowerPoint with Voice-over-slides

Flash Video Encoding Demystified. Lisa Larson~Kelley

About MPEG Compression. More About Long-GOP Video

ADAPTIVE STREAMING. Improve Retention for Live Content. Copyright (415)

Getting Started with Panopto (Windows and OSX) for Sakai

Video Options. The options available for video on the web are changing constantly. At the moment your options are divided between two types:

8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) Learning Objectives (2 of 2) Helper Applications & Plug-Ins

System Requirements. SuccessMaker 8

Computing in the Modern World

Video Compression Secrets - Smaller Files, Better Quality UPDATED (Oct 15)

Lecture 19 Media Formats

User Guide

DIGITAL AD SPECS. Rectangle 2 Dimensions: 300x250 File Size: 60 kb max. File Format: JPG, PNG, GIF. Animation: GIF; 15 sec max. Video: Yes (RRM/IBV)

DVS-200 Configuration Guide

Our Market. Overwhelming Growth of Video & It s Still Early

Online Help Browser Requirements Safari *Please note: Episode 7 does not support OS X or previous versions of Mac OS X.

G-Box System. Introduction: Signage Features. Display Images. Display Video

xview Data Sheet XTRMX April 2018 xtrmx.com/xview

Creators Basic Guide to Using UICapture (Mac)

NewsRoom Computer System

Streaming Technologies Glossary

STEP 1: DOWNLOAD THE PROGRAM

Articulate Engage 2013 Tutorial

Welcome to MyKangan! A how to guide for student. Welcome to MyKangan. A How to guide for students

freetunes Engelmann Media GmbH

Android Player User Guide

Job Profiles. Introduction to Job Profiles. Send document feedack to CHAPTER

Your Target Audience. Programmatically Optimized Media Mix. Reaching Your Audience on Their Favorite Devices

Chapter 28. Multimedia

Quicktime Player Error Codec For Avi Per

TrainingCentre Getting Started with the Universal

Universal Ad Package (UAP)

Request for: 2400 bytes 2005/11/12

2.1 Transcoding audio files

U-Vision Online Introduction Workshop

SORENSON VIDEO COMPRESSION

Debunking HTML5 Video Myths: A Guide for Video Publishers. by Robert Reinhardt

WorldNow Producer. Encoding Video

WebSpace - Creating Content, Pages, And Posts

Attaching audio files to an in Angel

How to Use Panopto Video Series Transcript

For more details and diagrams, please see the Quickstart guide that comes with the camera.

If you have many MXF files from Canon/Sony/Panasonic camcorders and want to convert them to video files that you can play on your

MediaCenter 9.3 Frequently Asked Questions

Compressor User Guide

DIGITAL DESIGN. advertising specs

Working with Images and Multimedia

IP65 Rated Freestanding Outdoor Monitor User s Manual

Integrated Business Communications support. Support information. Thank you for choosing SaskTel Integrated Business Communications (IBC).

TripleStream Product Description Version 4.6

Panopto Help Guide for KUMC Users

Overview... 2 Client Stations... 3 Network Bandwidth... 4 Firewall Settings... 5

[solved] Choppy playback with some source videos and edits in lightworks 12.x Posted by maxrp - 23 Nov :46

Student User Guide: Video Assessment

EDIT202 Digital Media Lab Assignment Guidelines

nanostream WebRTC.live

Technologies Web Côté client

The Future of Live Production

BBFlashBack Training for Library Staff

Cisco TelePresence Content Server S4.1

ZEN / ZEN Vision Series Video Encoding Guidelines

TBS8510 Transcoder Server User Guide

RealPresence Media Manager

Change H.264 export settings Posted by filmoy - 10 Mar :07

User Guide for Webcast Viewers. Live Webcast Video/Audio Only. For assistance visit:

Transcription:

Video Videos greatly support learning in an e-earning setting. It is a rather complex topic though, due to the variety of formats, codecs, containers and combination of operating systems and browsers. In order to minimize complexity, videos should therefore always be embedded using the editor plugin "Add/edit video" (Supported are: FLV, MP4 (h264 coded), and AAC). This chapter provides you with the key information for using the "Add/edit video" plugin in TinyMCE. Further information can be found in the grey boxes. Recommended format The mp4 container using the H.264 video codec and the mp3 audio codec is widely established and accepted. Current releases of Win IE, Firefox, Chrome and Safari are capable of playing videos encoded in such a way. Add / edit video Video (.FLV,.F4V,.MP4,.M4V (h264 coded),.aac and.m4a) Sound (.MP3) YouTube / Vimeo http (pseudo) streaming server (only.flv) rtmp streaming server HTML5 Video Prepare video for upload File size Resolution Frame rate (frames per second) Interlacing Codec Bitrate (kbps) HandBrake Settings Define: Container Videos are stored as single file with a specific file extension in so-called containers. This container contains one or more video and audio tracks, each one encoded with a specific codec. A codec is essentially a compression algorithm as well as a description how data is filed. Unfortunately, some file extension are also used for container as well as codec names. Because of this, you can never solely rely on a video label, as it could stand for either the codec, the container or the file extension. Add / edit video Use this plugin to embed videos into your html page. It accesses OpenOLATs integrated media player, which has its advantages. 1. The player automatically detects the format, as long video and audio tracks are encoded correctly. 2. The player detects whether the user accesses the video with a HTML5 enabled and codec compatible mobile browser. If so, videos will receive a HTML5 tag and can be viewed without difficulty on ipad or similar devices. These are the options available to you: Description Video: Embed a video with specific encoding. Sound: Embed a sound file without video. YouTube / Vimeo: Embed a youtube / vimeo video. http: Stream a flash file from a specific web server type. rtmp: Stream a flash file from a specific streaming server. Video (.FLV,.F4V,.MP4,.M4V (h264 coded),.aac and.m4a) This setting is best suited for integrating videos in OpenOLAT. Use the following container formats for uploading videos: Format container Container description Description

.FLV Flash Container Flash videos containing video and audio tracks, defined by Adobe.F4V No container, but a pure video format without sound, defined by Adobe.MP4 MPEG-4 MP4 video and sound format, defined by MPEG (Moving Picture Experts Group), various codecs.m4v MPEG-4 MP4 video format containing H.264 video codec as well as either MP3 or AAC audio codec; itunes format You can either add the link to the video in the address field or upload the video. To ensure optimum compatibility, best use a MPEG-4 container with a H.264 encoded video track and either an AAC or MP3 encoded sound track. This provides you with either the.mp4 or the.m4v file extension - but keep in mind that not all devices can play a.m4v file. We advise against using flash movies, as many portable devices such as e.g. the ipad generally do not support flash movies. Sound (.MP3) The player only offers limited functions when embedding mere sound files. Available functions are start, stop and the progress bar, but other functions such as full screen are missing. You can either enter the link to a mp3 file in the address field, or upload the audio file. Established browsers all fully support playback of mp3 audio files. YouTube / Vimeo YouTube movies are linked directly, thus bypassing the upload selection field. Videos are directly embedded this way. Attention though: Do not use the the "Embed" code (colored blue in the image above), but the link to the video, available under "Share". Vimeo users follow the instructions on the vimeo website. http (pseudo) streaming server (only.flv) This functio allows you to integrate flash movies with the.flv format. Once a movie is correctly exported at its origin, an index is added. Utilizing this index, users can jump to any spot at will without completely loading the movie. This is not a proper streaming though, as it would require an appropriate streaming software installed on the server. Enter the server address in the field "Streaming server". "Address" contains the address of the actual movie. We strongly advise against using this method, as content can not be viewed on ipads. rtmp streaming server This function enables you to use a flash streaming server. It requires a particular protocol, the so-called RMTP - Real Time Messaging Protocol. Various products are available to be employed as streaming servers, e.g. from the Akamai network. This protocol, developed by Adobe, permits the transmission of the video from the server to the flash player. It's common though to encounter problems with port settings and firewalls. We cannot recommend this option, as videos embedded in such a way cannot be viewed on the ipad.

HTML5 Video OpenOLAT also supports HTML5 videos embedded into a html page with external tools. This requires the author though to add different alternative video formats to the html tags (such as m4v and ogg) and file those in variable resolutions in OpenOLAT, if necessary. In this case, OpenOLAT supports pseudo streaming through progressive download respectively range requests. Prepare video for upload If a video is to be uploaded to OpenOLAT, it is crucial to not only consider video format, but also file size (due to network traffic upon download), as network traffic generated by videos is generally quite high. A calculation example can be found here. File size The file size of a video depends on a number of parameters. Resolution Number of pixels on the x and y... Number of pixels on the x and y axis. Common resolutions are e.g. 480x320, 800x600, 1024x567, 1280x720, 1920x1080. Starting with the resolution of 1280x720, these are considered HD resolutions. The higher the resolution, the more memory is required. Frame rate (frames per second) A frame rate of more than 16 pictures per... A frame rate of more than 16 pictures per second is perceived as a movie, depending greatly though on the intensity of movement. Cinema movies traditionally use a 24 frames per second. The european PAL television format uses 25 frames per second, while the american NTSC uses 30 frames per second. The framerate can be set either as variable or constant. For a movie made from powerpoint slides for example, it is advisable to use a variable framerate, as some frames may be visible for several seconds without any changes to it. The more frames (images) per second, the more memory needed. Interlacing Video frequency can be doubled with... Video frequency can be doubled with a simple trick without doubling the memory requirements. Only every second line of the image is alternately transferred and replaced on the screen. This results in a slightly less sharp image because the lines in the images do not match every other frame. Due to movement in the movie this is negligible in most cases though. If used at a constant frame rate, Interlacing reduces the amount of memory required. Codec A codec is a compression algorithm... A codec is a compression algorithm used to compress video data to the least possible size. As a rule, this compression is lossy, otherwise the amount of data would be much too large. Codecs contain a variety of optimization parameters. Depending on the settings, the duration of the compression varies. I mprovements with regard to image quality, file size and compression time can be made. The more compressed, the less memory is required. Various devices / browsers have different screen resolutions and support different codecs. A transcoding uses special software to produce copies of a high-quality video or audio source. These copies will be compressed with different resoluti ons, bit rates and codecs. Transcoding is the conversion of an audio or video file to a different audio format or video format.

The following versions of a video are sensible, depending on intended utilisation: mp4 / h264 high resolution and high bitrate: Desktop application mp4 / h264 medium resolution and medium bitrate: tablet or desktop with poor internet connection mp4 / h264 small resolution and low bitrate for mobile devices WebM / VP9 medium resolution and medium bitrate for devices not supporting mp4 / h264 Ogg / Theora medium resolution and medium bitrate for devices not supporting mp4 / h264 WebM and Ogg are no longer absolutely necessary as Google continues to support mp4 and Firefox now does too. WebM is a container used by Google, and Ogg a container used by Firefox. For using videos within OpenOLAT, it would be best to choose a small to medium resolution with a low to medium bitrate Bitrate (kbps) The bitrate defines the amount of... The bitrate defines the amount of bits created per second of video material. Bitrate can be set either as constant or variable. A maximum will be defined in the case of a variable bitrate. The bitrate defines the file size of a movie and affects picture quality significantly. In order to maintain a consistent picture quality with an increased resolution, the bitrate needs to be increased at the same rate. The higher the bitrate at a specific resolution, the better the movie quality, but the file size of the movie increases accordingly. Aspects such as colour space or anamorphic also affect the file size of a movie. The following table shows the average bitrate as well as expected bitrates for other resoltions with conventional settings. Bitrates vary heavily depending on the type of video, resolution, codec and compression. These are merely benchmarks, and were calculated based on a MP4 file encoded with H.264. Bitrate / Resolution 320x240 480x270 1024x576 1280x720 1920x1080 kbps 400 700 1'500 2'500 4'000 mbps 0.4 0.7 1.5 2.5 4 MB/S 0.1 0.1 0.2 0.3 0.5 MB/Min 3 5.3 11.3 18.8 30 A movie with an average duration of 10 minutes and a 480x270 resolution therefore approximately requires about 53 MB memory. The same movie with a resolution of 720p HD though requires about 180 MB. Calculation example: Network traffic If 50 users watch this 10 minute movie, this will create network traffic of 2.7 GB with a 480x270 resolution. If the movie is watched with a 720p HD resolution, expect 9 GB network traffic. If those 50 users watch the movie at the same time, the network needs to be able to handle a bitrate of 35 Mb/s (4.4 MB/s). If the movie is watched simultaneously with the 720p HD resolution, expect a network load of about 125 Mb/s (15.6 MB/s) 100 concurrent views doubles the aforementioned numbers accordingly. For comparison: a common 802.11n wireless access point allows for an effective transfer of about 40-50Mb/s. Special hardware makes a capacity of up to 100 Mb/s feasible, but user equipment also needs to be able to handle this kind of output. 50 users watching an educational video in the same room can therefore prove to be a problem for a network. HandBrake Settings If you have to create or provide videos for OpenOLAT yourself, a special transcoding software can help you transform files into the correct file format or the desired resolution. We recommend HandBrake, a free and open source software. More information on HandBrake can be found on the wikipedia HandBrake page as well as their commercial site https://handbrake.fr/. 1. Open HandBrake, and select the file to be converted. Starting formats are e.g. M4V or MOV files. 2. Select the "Normal" profile, and a check the "Web optimized" checkbox.

It would be best to leave the preset parameters untouched. 3. Select the desired size / resolution by opening the "Picture Settings". Small: 320 und 480 Medium: 1024 Large (HD): 1280 and 1920Y