在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:ooyala/html5-skin开源软件地址:https://github.com/ooyala/html5-skin开源编程语言:JavaScript 87.3%开源软件介绍:html5-skinAn open-source HTML5 UI skin based on React.js that overlays Ooyala V4 core player. This README contains introduction, setup and customization sections. High Level Overview
Plug and Play capability
ExamplesWe have a sample HTML page ready for you. Check out sample page This simple test HTML page can also be hosted on your environment to showcase html5 skin. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- V4 JS core and at least one video plugin is required. Plugins such as skin, discovery and Advertising need to be loaded separately -->
<script src="//player.ooyala.com/static/v4/production/latest/core.min.js"></script>
<script src="//player.ooyala.com/static/v4/production/latest/video-plugin/main_html5.min.js"></script>
<script src="//player.ooyala.com/static/v4/production/latest/video-plugin/bit_wrapper.min.js"></script>
<!-- Change these html5-skin.min.css and html5-skin.min.js to your local build if necessary -->
<script src="//player.ooyala.com/static/v4/production/latest/skin-plugin/html5-skin.min.js"></script>
<link rel="stylesheet" href="//player.ooyala.com/static/v4/production/latest/skin-plugin/html5-skin.min.css"/>
</head>
<body>
<div id='container'></div>
<script>
var playerParam = {
"pcode": "YOUR_PCODE",
"playerBrandingId": "YOUR_PLAYER_ID",
"debug":true,
"skin": {
// config contains the configuration setting for player skin. Change to your local config when necessary.
"config": ""
}
};
OO.ready(function() {
window.pp = OO.Player.create('container', 'RmZW4zcDo6KqkTIhn1LnowEZyUYn5Tb2', playerParam);
});
</script>
</body>
</html> Developer Setup
You can also use webpack-dev-server instead of gulp:
StyleWe use Sass (SCSS) for CSS preprocessor. Our 4-1 architecture pattern splits the Sass codebase over several files that are compiled into a single, minified stylesheet deployed to production. This approach maintains modular, decoupled style without impacting performance.
TestingTo run tests, run this command:
Add test files to directory Test file should have same location and name as For example, component file CustomizationRelative PathsNote that some necessary files are located with relative paths. Please verify that those files are properly placed in your web application. This includes:
Simple CustomizationSimple customization can be achieved by modifying var playerParam = {
"skin": {
"config": "//player.ooyala.com/static/v4/production/latest/skin-plugin/skin.json",
"inline": {
"startScreen": {"showDescription": false, "playIconStyle": {"color": "blue"}}
}
}
}; Advanced CustomizationAdvanced customization is readily available by modifying JS files. Follow Developer Setup section to create a local repository and to run build script. Built files are available inside build folder. You are welcomed to host your built skin javascript to be run with your player. How to ContributeIf you send a pull request, please do it against the We will do our best to keep the Submitting a Pull RequestThe core team monitors pull requests. We will review your pull request and either merge it, request changes to it, or close it with an explanation. Before submitting a pull request, please make sure the following is done:
Style GuideWe mostly follow Airbnb's Style Guide. |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论