Code Monkey home page Code Monkey logo

angularjs-media's Introduction

AngularJS Media Directives

Features

Simply embed media such as flash, twitch, justin player with simple html components.

Simple demo: /app

Requirements

  • AngularJS, tested on 1.0.7.

Installation

var app = angular.module('app', ['angularjs.media.directives']);

Usage

To embed flash player:

  <flash width="270" height="60" src="files/Inter-banner.swf"></flash>
  <flash width="270" height="60" src="files/AMD-banner.swf"></flash>
  <flash width="270" height="60" src="files/MSI-banner.swf"></flash>

Param:

  • src - {expression} - passing string url to convert to flash player.

To embed youtube player:

  <youtube width="466" height="250" v="BlQ2tMQzg80" start="16" end="30" autoplay="0"></youtube>
  <youtube width="466" height="250" v="BlQ2tMQzg80" params="?autoplay=1&start=25"></youtube>
  <youtube width="466" height="250" v="{{firstVideo}}" start="64" end="120" autoplay="1"></youtube>
  <youtube width="466" height="250" v="{{firstVideo}}?autoplay=1&start=90&end=120"></youtube>

Params:

  • v - {template} - passing v code to convert youtube embed player.
  • start - {expression} - passing number setup start time.
  • end - {expression} - passing number setup end time.
  • autoplay - {expression} - passing 0 or (true|1) for auto start.
  • params - {template} - passing string to setup by single attribute.

Notice: If <youtube params=""> already setup, then passing variable directly.


To embed twitch player and chatroom:

  <twitch width="600" height="400" channel="honeydotcakes"></twitch>
  <iframe width="300" height="400" twitch-chat channel="honeydotcakes"></iframe>

Params:

  • channel - {template} - passing string of channel name.
  • twitch-chat - (attribute) - identify iframe element to embed chatroom.

Notice: Chatroom directive can be twitch-chat and channel or twitch-chat-channel self alone.


To embed justin player and chatroom:

  <justin width="600" height="400" channel="ms_yuyu"></justin>
  <iframe width="300" height="400" justin-chat-channel="ms_yuyu"></iframe>

Params:

  • channel - {template} - passing string of channel name.
  • justin-chat - (attribute) - identify iframe element to embed chatroom.

Notice: Chatroom directive can be justin-chat and channel or justin-chat-channel self alone.

References

angularjs-media's People

Contributors

aqzhyi avatar rfvyhn avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.