First, installation
You can install the video player plugin via Bower.
Bower Install Frame-player
Introduce Frameplayer.css and frameplayer.js files in the page.
<link rel= "stylesheet" href= "Path-to/frameplayer.css" >
<script src= "Path-to/frameplayer.js" ></script>
Second, HTML structure
Insert the following HTML code in the page, the Data-src property is a JSON-formatted file of the video file.
<div id= "My-player" class= "Frameplayer" data-vidsrc= "Videos/video.json" ></div>
Third, initialize the plug-in
var player = new Frameplayer (' My-player ', options);
Player.play ();
Four, configuration parameters
Here are some of the parameters available for this video playback plugin:
var options = ({
' Rate ': 30,
' Controls ': false,
' AutoPlay ': true,
' Width ': ' 640px ',
' Height ': ' 390px ',
});
V. Generate video in JSON format file
1. First use ffmpeg to generate picture frames from a video file.
Ffmpeg-i video.mp4-an-f image2 "%d.jpg"
2. Then convert all picture frames to a single JSON file.
You can use node. JS:
CD Converter/nodejs
Node App.js framestart frameend Folder/to/imgs/json/video.json
You can also use PHP:
CD converter/php
PHP to_data_uri.php framestart frameend Folder/to/imgs/json/video.json
The advertising platform is a mobile ad implantation business that keymob with a third-party advertising platform, and app developers can reap the benefits of advertising by embedding SDK ads into their products.
HTML5 Video Player JS plugin tutorial based on JSON data
