|
| 1 | +--- |
| 2 | +title: Getting Started |
| 3 | +page_title: jQuery MediaPlayer Documentation - Getting Started with the MediaPlayer |
| 4 | +description: "Get started with the jQuery MediaPlayer by Kendo UI and learn how to create, initialize, and enable the component." |
| 5 | +slug: getting_started_kendoui_mediaplayer_component |
| 6 | +position: 2 |
| 7 | +--- |
| 8 | + |
| 9 | +# Getting Started with the MediaPlayer |
| 10 | + |
| 11 | +This guide demonstrates how to get up and running with the Kendo UI for jQuery MediaPlayer . |
| 12 | + |
| 13 | +After the completion of this guide, you will achieve the following end result: |
| 14 | + |
| 15 | +```dojo |
| 16 | + <div id="mediaplayer" style="width:640px; height: 360px;"></div> |
| 17 | + <script type="text/javascript"> |
| 18 | + $(document).ready(function () { |
| 19 | + $("#mediaplayer").kendoMediaPlayer({ |
| 20 | + autoPlay: true, |
| 21 | + navigatable: true, |
| 22 | + media: { |
| 23 | + title: "ProgressNEXT 2019 Highlights", |
| 24 | + source: "https://youtu.be/2OvvwWShNWo" |
| 25 | + } |
| 26 | + }); |
| 27 | + }); |
| 28 | + </script> |
| 29 | +``` |
| 30 | + |
| 31 | +## 1. Create a Div Element |
| 32 | + |
| 33 | +First, create a `<div>` element on the page that will be used to initialize the component. The content of the `<div>` will be used as content for the MediaPlayer. |
| 34 | + |
| 35 | +```html |
| 36 | + <div id="mediaplayer" style="width:640px; height: 360px;"></div> |
| 37 | +``` |
| 38 | + |
| 39 | +## 2. Initialize the MediaPlayer |
| 40 | + |
| 41 | +In this step, you will initialize the MediaPlayer from the `<div>` element. |
| 42 | + |
| 43 | +```dojo |
| 44 | + <div id="mediaplayer" style="width:640px; height: 360px;"></div> |
| 45 | + <script type="text/javascript"> |
| 46 | + $(document).ready(function () { |
| 47 | + $("#mediaplayer").kendoMediaPlayer(); |
| 48 | + </script> |
| 49 | +``` |
| 50 | + |
| 51 | +## 3. Specify the Media |
| 52 | + |
| 53 | +Here, you will specify the [`media`](/api/javascript/ui/mediaplayer/configuration/media) that will be played by the component. |
| 54 | + |
| 55 | +```dojo |
| 56 | + <div id="mediaplayer" style="width:640px; height: 360px;"></div> |
| 57 | + <script type="text/javascript"> |
| 58 | + $(document).ready(function () { |
| 59 | + $("#mediaplayer").kendoMediaPlayer({ |
| 60 | + media: { |
| 61 | + title: "ProgressNEXT 2019 Highlights", |
| 62 | + source: "https://youtu.be/2OvvwWShNWo" |
| 63 | + }, |
| 64 | + autoPlay: true, // The video or videos will start playing after the component initialization. |
| 65 | + navigatable: true, // Enables the component keyboard navigation. |
| 66 | + }); |
| 67 | + }); |
| 68 | + </script> |
| 69 | +``` |
| 70 | + |
| 71 | +>tip When using local sources, consider the video formats supported by the different browsers. For more information on the supported HTML5 video formats, refer to [the HTML Video documentation](http://www.w3schools.com/html/html5_video.asp). Once your video files are ready, initialize the MediaPlayer by using the `div` element. |
| 72 | +
|
| 73 | +>tip Because of the [mobile considerations](https://developers.google.com/youtube/iframe_api_reference#Mobile_considerations), browsers on iOS do not automatically play embedded media. This limitation prevents unsolicited downloads over cellular networks at the expense of the user. The user always has to initiate a playback. For more information, refer to the article on [audio and video HTML](https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html). |
| 74 | +Other functionalities may also be limited due to iOS restrictions. For more information, refer to [this article](https://community.shopify.com/c/shopify-design/html5-videos-do-not-work-in-safari-on-mac-or-ios-but-work-fine/td-p/2137777) and to other available resources on the Web. |
| 75 | + |
| 76 | +## Next Steps |
| 77 | + |
| 78 | +* [Referencing Existing Component Instances]({% slug widget_methodsand_events_kendoui_installation %}) |
| 79 | +* [Demo Page for the MediaPlayer](https://demos.telerik.com/kendo-ui/mediaplayer/index) |
| 80 | + |
| 81 | +## See Also |
| 82 | + |
| 83 | +* [JavaScript API Reference of the MediaPlayer](/api/javascript/ui/mediaplayer) |
| 84 | +* [Knowledge Base Section](/knowledge-base) |
| 85 | + |
| 86 | +<script> |
| 87 | + window.onload = function() { |
| 88 | + document.getElementsByClassName("btn-run")[0].click(); |
| 89 | + } |
| 90 | +</script> |
0 commit comments