TheMedia Player" is a browser extension to play music and video files either locally or from online sources. This project aims to bring a VLC-liked media playing experience using native HTML5 technology. The add-on is built on top of the well-known "video.js" project by applying a few custom plug-ins to enhance the user experience. This player supports media boosting, speed control, playlist media selection, fullwidth-progress bar, HTTP-streaming (M3U8), cast to a remote device, and wave surfer visual for audio files.How to Use (local resources):Open the interface and drop the media link to itHow to Use (remote resources):Open a video page like _video.aspRight-click on the player and select "Open in Media Player"You can start watching an offline video file by dragging and dropping the video file into the player or pressing the big play button. To have the player load subtitle make sure to drop both video and subtitle files together (The dropped subtitle should have the same name as the file and needs to be in SRT or VTT format). Also, you can add a subtitle file later using the "+CC" button. This button appears when there is no subtitle found for the current track.Extra Features:1. Video casting: right-click on the player. If your browser supports this feature, you can transfer the media to a remote device.2. Take a screenshot: Press the "screenshot" button on the player3. 2x volume-boosting: Like VLC, you can boost the audio by 200%. Use the boosting feature when the volume is not loud enough.4. Media Capturing: The player can optionally detect media files in the current tab and transfer them to the media player5. Play in a separate window or inside a browser tab6. Supports media keys even if the player is not focused7. Supports native context menu on Chrome OS. You can right-click on the finder window (explorer) and use this player to open media files.You can use your keyboard to control the following playback options:1. "F" key: This will toggle the fullscreen mode on and off2. "Space" key: This will toggle the playing state of the player3. "Key Up" and "key Down": Increase or decrease volume.4. "Key Left" and "Key Right": Seek backward and forward for 10 seconds.5. "U" key: Shuffle playlist6. "R" key: Toggle repeat, repeat one, and no-repeat7. "S" key: Take s screenshot8. "B" key: Boost volume (2x or 200%)9. "O" key: Open network URLsChange Log:0.1.2:1. Media Player now supports history (it will save the current track position and retrieves it after a restart)2. Media player now supports global keyboard shortcuts for toggle pause and play state, moving to the previous track and moving to the next track0.1.3:1. Better playlist!0.1.4:1. For audio tracks, a seek-able wave-surfer is replaced with the old poster image2. playback rate is now adjustable.0.1.7:1. Supports live stream (m3u8)2. Supports folder drop and recursive media file search0.2.31. Partial support for MKV video container0.2.51. Better support for video/mkv format
Using the API's JavaScript functions, you can queue videos for playback; play, pause, or stop those videos; adjust the player volume; or retrieve information about the video being played. You can also add event listeners that will execute in response to certain player events, such as a player state change.
This guide explains how to use the IFrame API. It identifies the different types of events that the API can send and explains how to write event listeners to respond to those events. It also details the different JavaScript functions that you can call to control the video player as well as the player parameters you can use to further customize the player.
The sample HTML page below creates an embedded player that will load a video, play it for six seconds, and then stop the playback. The numbered comments in the HTML are explained in the list below the example.
The tag in this section identifies the location on the page where the IFrame API will place the video player. The constructor for the player object, which is described in the Loading a video player section, identifies the tag by its id to ensure that the API places the in the proper location. Specifically, the IFrame API will replace the tag with the tag.
The code in this section loads the IFrame Player API JavaScript code. The example uses DOM modification to download the API code to ensure that the code is retrieved asynchronously. (The tag's async attribute, which also enables asynchronous downloads, is not yet supported in all modern browsers as discussed in this Stack Overflow answer.
The onYouTubeIframeAPIReady function will execute as soon as the player API code downloads. This portion of the code defines a global variable, player, which refers to the video player you are embedding, and the function then constructs the video player object.
The API will call the onPlayerStateChange function when the player's state changes, which may indicate that the player is playing, paused, finished, and so forth. The function indicates that when the player state is 1 (playing), the player should play for six seconds and then call the stopVideo function to stop the video.
After the API's JavaScript code loads, the API will call the onYouTubeIframeAPIReady function, at which point you can construct a YT.Player object to insert a video player on your page. The HTML excerpt below shows the onYouTubeIframeAPIReady function from the example above:
The IFrame API will replace the specified element with the element containing the player. This could affect the layout of your page if the element being replaced has a different display style than the inserted element. By default, an displays as an inline-block element.
As mentioned in the Getting started section, instead of writing an empty element on your page, which the player API's JavaScript code will then replace with an element, you could create the tag yourself. The first example in the Examples section shows how to do this.
Note that if you do write the tag, then when you construct the YT.Player object, you do not need to specify values for the width and height, which are specified as attributes of the tag, or the videoId and player parameters, which are are specified in the src URL. As an extra security measure, you should also include the origin parameter to the URL, specifying the URL scheme ( or ) and full domain of your host page as the parameter value. While origin is optional, including it protects against malicious third-party JavaScript being injected into your page and hijacking control of your YouTube player.
To call the player API methods, you must first get a reference to the player object you wish to control. You obtain the reference by creating a YT.Player object as discussed in the Getting started and Loading a video player sections of this document.
Queueing functions allow you to load and play a video, a playlist, or another list of videos. If you are using the object syntax described below to call these functions, then you can also queue or load a list of a user's uploaded videos.
The object syntax lets you pass an object as a single parameter and to define object properties for the function arguments that you wish to set. In addition, the API may support additional functionality that the argument syntax does not support.
The cuePlaylist and loadPlaylist functions allow you to load and play a playlist. If you are using object syntax to call these functions, you can also queue (or load) a list of a user's uploaded videos.
The optional index parameter specifies the index of the first video in the playlist that will play. The parameter uses a zero-based index, and the default parameter value is 0, so the default behavior is to load and play the first video in the playlist.
The optional startSeconds parameter accepts a float/integer and specifies the time from which the first video in the playlist should start playing when the playVideo() function is called. If you specify a startSeconds value and then call seekTo(), then the player plays from the time specified in the seekTo() call. If you cue a playlist and then call the playVideoAt() function, the player will start playing at the beginning of the specified video.
When the list is cued and ready to play, the player will broadcast a video cued event (5). The optional listType property specifies the type of results feed that you are retrieving. Valid values are playlist and user_uploads. A deprecated value, search, will no longer be supported as of 15 November 2020. The default value is playlist.
If the listType property value is playlist, then the list property specifies the playlist ID or an array of video IDs. In the YouTube Data API, the playlist resource's id property identifies a playlist's ID, and the video resource's id property specifies a video ID. If the listType property value is user_uploads, then the list property identifies the user whose uploaded videos will be returned. If the listType property value is search, then the list property specifies the search query. Note: This functionality is deprecated and will no longer be supported as of 15 November 2020.
The optional index property specifies the index of the first video in the list that will play. The parameter uses a zero-based index, and the default parameter value is 0, so the default behavior is to load and play the first video in the list.
The optional startSeconds property accepts a float/integer and specifies the time from which the first video in the list should start playing when the playVideo() function is called. If you specify a startSeconds value and then call seekTo(), then the player plays from the time specified in the seekTo() call. If you cue a list and then call the playVideoAt() function, the player will start playing at the beginning of the specified video.
3a8082e126