ronik-design / react-drive-in Goto Github PK
View Code? Open in Web Editor NEWA wicked awesome React component replacement for BigVideo.js that is lighter with fewer dependencies.
License: ISC License
A wicked awesome React component replacement for BigVideo.js that is lighter with fewer dependencies.
License: ISC License
http://ronik-design.github.io/react-drive-in/ Videos are not playing either on http://ronik-design.github.io/react-drive-in/multi.html
For example, start, stop, destroy, switch to other video in playlist.
For some reason my video isn't playing. I can see my poster and verified the onPlaying method is called but I do not see or hear any video. No errors being reported in the console either.
I'm just testing with the glacier video from the example folder.
I am using React v.0.14 and react-router v1.0
Scaffold project to make dev easy.
Probably not useful enough to be worth it, but worth mentioning.
Per #3, currently uses translate3d.
I'm trying to render the component along with a few others on a page, however, for the life of me I can't figure out how to display the other components in front of the video. Each time I try, the component loads and it blocks the others.
For lack of a better term, is there a way to 'send video to back' (nest components inside so that they appear over the video)?
Hi awesome component! Apologies if I've overlooked this is the documentation, but is it possible via the component api for the videos in a playlist to loop without looping the playlist itself? Thanks.
Hi there, I'm having issues including this react component using Browserify. Can you point me in the right direction?
let
React = require('react'),
DriveIn = require('react-drive-in'),
FillParentVideo = React.createClass({
render(){
return (
<DriveIn
show="http://raw.githubusercontent.com/ronik-design/react-drive-in/master/example/glacier.mp4"
poster="http://raw.githubusercontent.com/ronik-design/react-drive-in/master/example/glacier.jpg"
/>
);
}
});
module.exports = FillParentVideo;
The error I get is:
Uncaught TypeError: Cannot read property 'Component' of undefined
which makes sense because I'm missing the $mountNode
target, but how do I insert this at the tag level and have $mountNode equal whatever div I just threw this in?
How can define a default pause in videos?
Would be a great feature to have. Ability to set background videos on different page elements, many per page possible.
Video doesn't loop.
I'm running into issues when deploying on a production server (although seems to work locally). Is there anyway you can update this to 15.3.2?
I know mobile browsers don't do autoplay, but even when clicking play/pause there is no background video on iPad.
Is that even possible?
Getting this console error:
Warning: Invalid prop duration
of type string
supplied to DriveIn
, expected number
.
Would be nice to be able to specify multiple asset qualities for use at different window sizes.
There's no video playing at http://ronik-design.github.io/react-drive-in/, and two console errors:
On many mobile devices autoplay is not permitted. We should allow for either a still image fallback with no option to play the video or a fallback animated gif.
Another console error:
Uncaught TypeError: Cannot read property 'firstChild' of undefined
/**
* Finds a node with the supplied `targetID` inside of the supplied
* `ancestorNode`. Exploits the ID naming scheme to perform the search
* quickly.
*
* @param {DOMEventTarget} ancestorNode Search from this root.
* @pararm {string} targetID ID of the DOM representation of the component.
* @return {DOMEventTarget} DOM node with the supplied `targetID`.
* @internal
*/
findComponentRoot: function(ancestorNode, targetID) {
var firstChildren = findComponentRootReusableArray;
var childIndex = 0;
var deepestAncestor = findDeepestCachedAncestor(targetID) || ancestorNode;
firstChildren[0] = deepestAncestor.firstChild; /** --------- here be the error -------- **/
firstChildren.length = 1;
while (childIndex < firstChildren.length) {
var child = firstChildren[childIndex++];
var targetChild;
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.