React Media Player Demo
How do I make an react media player demo?
Basic demo for https://github.com/souporserious/react-media-player. What is a react media player demo? How do you make a react media player demo? This script and codes were developed by Travis Arnold on 12 September 2022, Monday.
React Media Player Demo - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>React Media Player Demo</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .media-player video,
.media-player iframe { display: block; margin: 0 auto;
}
.media-player video::-webkit-media-controls { display: none !important;
}
.media-controls { display: flex; justify-content: center; padding: 12px; position: relative; z-index: 2147483647;
}
.media-controls * + * { margin-left: 12px;
}
body { padding: 30px; margin: 0;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="app"></div> <script src='https://fb.me/react-0.14.1.js'></script>
<script src='https://fb.me/react-dom-0.14.1.js'></script>
<script src='https://npmcdn.com/[email protected]/dist/react-media-player.js'></script> <script src="js/index.js"></script>
</body>
</html>
React Media Player Demo - Script Codes CSS Codes
.media-player video,
.media-player iframe { display: block; margin: 0 auto;
}
.media-player video::-webkit-media-controls { display: none !important;
}
.media-controls { display: flex; justify-content: center; padding: 12px; position: relative; z-index: 2147483647;
}
.media-controls * + * { margin-left: 12px;
}
body { padding: 30px; margin: 0;
}
React Media Player Demo - Script Codes JS Codes
"use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var _React = React;
var Component = _React.Component;
var Children = _React.Children;
var PropTypes = _React.PropTypes;
var _ReactMediaPlayer = ReactMediaPlayer;
var Media = _ReactMediaPlayer.Media;
var controls = _ReactMediaPlayer.controls;
var PlayPause = controls.PlayPause;
var CurrentTime = controls.CurrentTime;
var Progress = controls.Progress;
var SeekBar = controls.SeekBar;
var Duration = controls.Duration;
var MuteUnmute = controls.MuteUnmute;
var Volume = controls.Volume;
var Fullscreen = controls.Fullscreen;
var App = function (_Component) { _inherits(App, _Component); function App() { _classCallCheck(this, App); return _possibleConstructorReturn(this, _Component.apply(this, arguments)); } App.prototype.render = function render() { return React.createElement( Media, { src: "https://www.youtube.com/embed/h3YVKTxTOgU" }, function (Player) { return React.createElement( "div", { className: "media-player" }, Player, React.createElement( "nav", { className: "media-controls" }, React.createElement(PlayPause, null), React.createElement(CurrentTime, null), React.createElement(Progress, null), React.createElement(SeekBar, null), React.createElement(Duration, null), React.createElement(MuteUnmute, null), React.createElement(Volume, null), React.createElement(Fullscreen, null) ) ); } ); }; return App;
}(Component);
ReactDOM.render(React.createElement(App, null), document.getElementById('app'));
Developer | Travis Arnold |
Username | souporserious |
Uploaded | September 12, 2022 |
Rating | 3 |
Size | 3,798 Kb |
Views | 50,600 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
React Checkbox MultiSelect | 6,915 Kb |
Material CSS Switch | 2,979 Kb |
Segmented Control | 3,497 Kb |
Animated heading using css and javascript | 3,516 Kb |
Playing with CSS folding | 3,155 Kb |
Raidial Loader | 2,565 Kb |
React Paper Ripple | 5,312 Kb |
React Circle Media Player | 5,566 Kb |
Parallax Mouse Move | 2,565 Kb |
Simplistic WYSIWYG Editor | 3,740 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Falling Down the Rabbit Hole | Rachelnabors | 4,578 Kb |
Simple Login Form Template | Banunn | 3,571 Kb |
Cloud upload | Jaflo | 2,774 Kb |
CSS Parent Selector | Tomhodgins | 2,143 Kb |
A Pen by Paul Sullivan | Pwsm50 | 2,349 Kb |
Calendar | Miroot | 2,033 Kb |
Pruebas de d3.js | Juanmanuelcarnerero | 2,485 Kb |
03 - CSS Variables | Run-time | 2,682 Kb |
Pomodoro Clock | Yas46 | 3,328 Kb |
Default Input, Textareas, Submits, and Buttons in iOS | Demersdesigns | 2,334 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!