In 2014, we released our new HTML5 player — Arpeggio (pronounced: ahr-pej-ee-oh). It's built from the ground up with HTML5 and future technologies in mind. Our Flash "Legacy" player (which also supports mobile-only HTML5 playback) will still be available for the foreseeable future.
Topics
Benefits of Arpeggio
There are many reasons why you'll want to use Arpeggio going forward:
- Arpeggio is completely HTML5 compliant. This means it will work on the vast majority of mobile and desktop devices, will require no third party software (such as Flash Player) to display content within the player or to customize the player in your own way, and will load the video content even faster than the Flash player.
- Timeline comments can be created and viewed on many mobile devices. (This is very dependent on the restrictions of video playback on mobile operating systems. For instance, iOS gives little access to the appearance and functionality of its web video player on iPhones and iPod Touch.)
- It will integrate much better with our upcoming Media Community* product.
How to enable Arpeggio
You may use Arpeggio by navigating to your Player Setup (Default Settings > Player Setup). Click 'Arpeggio' and scroll down to click 'Save'. This will not affect any of your current video embeds. Arpeggio works as a different player type based on the video embed code. This means you can embed videos using the Flash and HTML5 players side-by-side. If you'd like to use the Arpeggio player with your previously embedded videos, then you will need to copy the new embed code for the appropriate video(s), or — if you're very familiar with HTML — change the portions of the embed code which affect player type and size (to avoid letterboxing/pillarboxing).
To get more technical, you can change the player type in your iframe embed code(s) by changing player=full to player=arpeggio.
General Release
You may find some functionality (if you're familiar with in our Flash player) unavailable. Continued updates will be made to Arpeggio. Your feedback is extremely important in its continued development, so please don't hesitate to submit a support ticket and share your thoughts.
Features in Flash not yet in Arpeggio
- Video Commenting
Player Appearance
Features
Embedding
Arpeggio adds additional embedding options not previously possible with our Flash player. Now, you will have embed codes and features which will make embedding videos into your website or platform much more seamless.
iframe - Our iframe embed code will function the same as any other iframe embed code. You now have the option to embed comments for a particular video separately from the player — if you have commenting enabled.
div - Some platforms may not support iframe embed codes. In this case, we have a DIV embed code. Again, the video embed and comments embed are separate and both optional.
Arpeggio adds functionality for easily enabling the player to be responsive with your website. All you need to do is remove the height from the embed code and change the width to: width="100%" (See here for more)
Will I need to update my embed codes?
As our Arpeggio player evolves, we will have changing embed codes. It's our goal to make any transition to the new player and/or embed codes as frictionless as possible. At this time, if you're using our iframe embed code, then you will not need to make any changes to support the future updates of the Arpeggio player.
Timeline Commenting
Creating a timed comment
- Pause your video. Then, click anywhere along the timeline to place the playhead at that position.
- Hover your cursor over the playhead and you will see a plus (+) symbol. Click this and you'll have several options: Add comment; Add tag; Add video comment; Set thumbnail. Select 'Add comment'.
- You will now have a small box to enter text within. Enter the comment you'd like to have appear at this position in the video. There's a limit of 1,000 characters per comment.
- Note: You may use basic HTML to add a link here. Use the <a> tag to do this. For example, if you'd like to make the comment, 'Do you feel that our new design page is being marketed well?', then you could link to the specific page by writing the comment as follows:
Do you feel that our new <a href="http://www.viddler.com/">home page</a> is being marketed well?</a>
The comment would look like this:
Do you feel that our new home page is being marketed well?
4. Lastly, click 'OK' to save the comment at that position along the timeline.
Chapters
Chapters require an Advantage or higher account.
To create chapters on your video, just navigate click 'Edit' for a video, then click the 'Interaction' tab. From here, you'll have the ability to manage Comments and Chaptering. Creating chapters requires entering a time and a chapter name (shorter chapter titles are best).
Chapters will appear in the upper menu on the player and each can be clicked to skip to that chapter/position in the video.
Skip Forward/Backward
Skipping functionality requires an Advantage or higher account.
Enabling skip buttons can be done at the account level or in individual embeds. To enable at the account level, navigate to Default Settings > Player Setup > Customize. Enable 'Go Back' and/or 'Go Forward', then define the number of seconds you'd like the viewer to seek in that direction when they click the button.
Speed Controls
Playback speed control requires an Advantage or higher account.
Our HTML5 player has the option for altering the playback speed of a video to be faster or slower than the original speed. This is great for those that need to faster to save time, or slower better comprehend the material. Speeding up or slowing down playback maintains the same audio pitch — avoiding the well-known "chipmunk" or "Darth Vader" sounds.
To enable Speed Controls, navigate to Default Settings > Player Setup > Customize. Then select the 'Show speed controls' checkbox.
Downloading
You may allow your viewers/subscribers to download your videos via the player. To do this, you need to have your video download permission to be set to 'All Viewers'. The download permission can be done on an individual video, or by setting the default for new uploads via Sharing under Player Customization.
Browser Compatibility
Our HTML5 player is built with modern browser compatibility in mind. This means it's compatible with the latest version of Firefox, Chrome, Safari, Internet Explorer, Opera, and their mobile counterparts. We have a detailed chart of compatibility on our developer documentation. In addition, you can also use this extensive compatibility chart based on the HTML5 Video element (<video>): caniuse.com/#feat=video
Pronunciation
Arpeggio is pronounced as ahr-pej-ee-oh. Play the audio below to hear.
*Coming in 2015.
Comments
7 comments
Hi,
Don't know if this is the feedback you are looking for, but I tried the new Arpeggio player on ViolinLab.com. Worked great with Chrome (Maverick) with multiple tabs open.
I checked it with my Kindle and the player doesn't show the full screen logo, and when I changed the resolution setting, it didn't reload, just stalled.
thanks,
Beth Blackerby
Under the Player Appearance section, it just says the following:
"You can customize the the appearance using CSS. Click here to see all the CSS classes available."
Unfortunately, there is no link to click on...
I would like to be able to use the Arpeggio player and the div embed code but I don't see anything like a "Player Appearance section" can you please point me in the right direction so I can modify things on the Arpeggio player? Thanks for any suggestions you might have.
To customize the player type and branding, you would navigate to: Videos > Default Settings > Player Setup > Customize
Hey Derek, this is Gustavo from www.descola.org. I´d like to know more about Arpeggio´s browsers compatibility. Do you guys have some sort of compatibility chart?
Best regards,
We now have a browser compatibility chart available here: developers.viddler.com/#browser-compatibility - I have also added this to the article above.
I recall reading somewhere that Arpeggio is not yet compatible with Google Analytics. Does it support Viddler's own analytics? Is there a list of the parity between it and the old player?
Please sign in to leave a comment.