Yendif Player

Yendif Player is designed to accept video inputs either from a JavaScript or a standard video element. The following example discusses how input can be provided via video tag.

<div class="yendifplayer">
  <video>
    <source type="video/webm" src="http://mysite.com/video.webm">
    <source type="video/mp4" src="http://mysite.com/video.mp4">
    <source type="video/ogg" src="http://mysite.com/video.ogv">
  </video>
</div>

Always use a SOURCE tag inside the VIDEO tag and specify the video TYPE. Yendif Player can then adjust the VIDEO tags as required by browser or platform.

Video attributes

The nested VIDEO tag accepts various arguments. For example:

<video autoplay loop>

• autoplay - start the playback automatically.
• loop - start playback once again from the beginning once the video finishes.
• preload - start pre-loading the video in the background.
• poster - display an image at startup on the video screen.

These elements are valued by both the Flash component and HTML5 video tag.

Flash Support

By default, Yendif Player utilizes the HTML5 video tag. However, it falls back to Flash if HTML5 video format is not supported. You can even configure the system to use Flash first and fall back to HTML5 format. It is possible to configure the primary engine using the "data-engine" attribute.

<div class="yendifplayer" data-engine="flash">
  <video>
    <source type="video/mp4" src="http://mysite.com/video.mp4">
  </video>
</div>

Yendif Player supports a distinctive "video/flash" source type to target videos particularly for Flash. For example:

<div class="yendifplayer">
  <video>
    <source type="video/webm" src="http://mysite.com/video.webm">
    <source type="video/mp4" src="http://mysite.com/video.mp4">
    <source type="video/flash" src="http://mysite.com/video.flv">
  </video>
</div>

In the above mentioned example, the plugin will select the FLV video during flash playback. In case "video/flash" is not given, the player will choose the MP4 video for flash.

RTMP Streaming

In case you want to jump on the timeline randomly without considering the downloaded video, then your server should be able to support both RTMP protocol (for Flash) and byte-range requests (for HTML5 video).

RTMP video for flash is given through the video type "video/flash", however the RTMP server path is included through "data-rtmp" attribute. Go through the following example to better understand this phenomenon:

<div class="yendifplayer">
  <video>
    
    <!-- For HTML5 playback -->
    <source type="video/mp4" src="http://mysite.com/video.mp4">

    <!-- For Flash playback -->
    <source type="video/flash"
            src="/stream.mp4" 
            data-rtmp="rtmp://server/application/">

  </video>
</div>

Play YouTube Videos

Yendif Player can support both the Flash and Iframe APIs of YouTube. You can add YouTube video as source type "video/youtube".

<div class="yendifplayer">
  <video>
    <source type="video/youtube"
            src="http://www.youtube.com/watch?v=9QscURRuF0g">
  </video>
</div>

Adding Videos through javascript

The following example gives you an idea about adding various video formats through javascript,

// ensure DOM is ready
$(function () {
 
  // this will install yendifplayer into an element with id="player"
  $("#player").yendifplayer ({
    videos:{
      mp4:  "http://mydomain.org/video.mp4",
      webm: "http://mydomain.org/video.webm",
      ogg:  "http://mydomain.org/video.ogv",

      // Adding a RTMP video
      flash: "stream.mp4",
      rtmp: "rtmp://server_ip_address/application/",

      // Adding a YouTube video
      youtube: "http://www.youtube.com/watch?v=9QscURRuF0g",

      // Adding a poster image
      poster: "http://mydomain.org/poster.jpg"
    }
  });

});

The video player supports several configuration alternatives. Review the following table to learn about the available properties.

Mime types

Make sure that all the files are available on the server and that the server transmits them with the correct Content-Type. Depending on your server you might have to extend the .htaccess or mime.types files (Apache), use the IIS manager (Internet Information Server) or set the header via Metadata (Amazon S3).

Example .htaccess file:

AddType video/mp4             .mp4
AddType video/webm            .webm
AddType video/ogg             .ogv
AddType application/x-mpegurl .m3u8