React Video Component

Video.coffee

React = require "react"

{video,source} = React.DOM

View = React.createClass
	displayName: "Video"

	shouldComponentUpdate:(nextProps,nextState)->
		# unless @refs.video.readyState is 4
		# 	return true

		# unless @props.options.style.width is nextProps.options.style.width 
		# 	return true

		# unless @props.options.style.height is nextProps.options.style.height 
		# 	return true

		# return false
		return true

	# componentDidMount:()->
	# 	@refs.video.load()
	# 	console.log "yey"

	componentDidUpdate:()->
		unless @refs.video.readyState is 4
			@refs.video.load()

	options:()->
		props = @props.options
		props.ref = "video"
		return props

	render: ()-> 
		video @options() ,
			@props.sources.map (video,index)->
				source
					key:index
					src: video.src
					type: video.type or ""

module.exports = React.createFactory View

Usage:

Video
	options:
		className:"content-gif"
		poster:"#{@props.block.data.fileUrl}?frame=1"
		loop:true
		controls:false
		autoPlay:true
		style: @gifStyle()
	sources:[
			src:"#{@props.block.data.fileUrl}?fm=mp4"
			type:"video/mp4"
	]

in JSX

<Video options={ options } sources={ sources } />

Important part is

 unless @refs.video.readyState is 4
  @refs.video.load()