Add support for audio/video attributes

[yocontra]

• adds currentTime property for controlling position in a video or audio element
• adds volume property for controlling volume in a video or audio element
• adds paused mutation method for controlling play/pause state in a video or audio element
• adds playbackRate property for controlling playback speed in a video or audio element
• adds srcObject property for setting a WebRTC stream on a video element
• adds kind property/attribute for track element
• adds srcLang property/attribute for track element

Related: #1128 #1474 #2090

[sophiebits]

If we want to support an API like this, it should be paused to mirror the DOM API – but this is tricky because when the media reaches the end, it'll stop playing causing the element to get out of sync with the specified prop.

[yocontra]

@spicyj I agree - paused makes more sense than playing

[sophiebits]

Does react automatically lowercase attribute names?

It doesn't, but I believe HTML attributes (unlike SVG, for example) are always case-insensitive so the mapping isn't necessary.

[yocontra]

Perhaps the paused state should be handled in a DOM wrapper to make sure the state stays in sync

[daniellewissc]

does this add support for media events (canplaythrough, durationchange) as synthetic events?

[yocontra]

@daniellewissc No, this only adds support for attributes. When I have time I'll work on adding full event support as well

[syranide]

currentTime is not a DOM markup attribute and should not be supported by React (see #2140), I believe the same applies to some of the others too including playbackRate.

[yocontra]

@syranide There are other non DOM markup attributes that are supported. There seems to be a discrepancy between implementation and reality that should be ironed out either by adding all attributes or documenting why they shouldn't be supported.

[syranide]

@contra Hmm? Which ones. The only ones I know of are scrollLeft and scrollTop and no one seems to think they should be there. Nor do I see why we should add more when the ones we have are broken and shouldn't be used.

[zpao]

scrollLeft and scrollTop are there but shouldn't be (artifact of times forgotten). If you see others, please let us know.

[zpao]

Let's get the non-markup attributes removed and then we can move forward.

[akre54]

maybe node[value ? 'pause' : 'play']() or value ? node.pause() : node.play()

[syranide]

As I assume this is a supported attribute (or else it should be removed), not using DOMMutationMethods at all and setting the attribute (as implemented by the standard) instead seems favorable.

[akre54]

The docs aren't great but as far as I'm aware the only way to set the play state is through the play and pause methods. There's no attributes for it. [1] [2] [3]

[syranide]

http://www.w3.org/TR/html-markup/video.html says it doesn't exist, so it shouldn't in React either.

[syranide]

http://www.w3.org/TR/2012/WD-html5-20121025/media-elements.html#mediaevents

Are there new events we should support? (I'm not really familiar with the new media elements)

[sophiebits]

We can't take this as-is so I'm closing this out – if you do want to remove the non-attribute property names and rebase, I think we can take this though.

[yocontra]

Seems like a step in the wrong direction IMO I hope this get rethought in the future

[syranide]

@contra Ambigious behavior is best handled by community components, put audio/video in a component of your own and you're free to do what you want with the properties. Anything React could do that you can too.