I'v got jwplayer source code from github. I want to change some scripts and built the player. So, i need to change file source from javascript in flash. In javascript i'm setting some params "host" and "flv_id":
jwplayer("mediaplayer").setup({
autostart: false,
controlbar: "none",
displayclick: "none",
smoothing: true,
stretching: "exactfit",
icons: false,
flashplayer: "/jwplayer.swf",
file: "/videos/3aae1ef41d.flv",
flv_id: "115554",
host: "<?php echo $host; ?>",
provider: "http",
startparam: "start",
height: 400,
width: 650,
events: {
onComplete: function() {
},
onPause: function(event) {
},
onError: function() {
}
}
});
In flash i have some class, which can make post-request:
var post:Post = new Post("http://"+someparameters["host"]+"/video/flv");
post.variables.id = someparameters["flv_id"];
post.Send(Go);
Go - is success callback function that returns some flvlink.
Go(link:String):void {
//link - is source, that i need to play
}
The player is playing the "/videos/3aae1ef41d.flv". But i want to play the source from Go(); I have class "Post", but i don't know the place to paste my code. Now, i haven't any changes in default source code. I don't know which file of player source code to edit. So, i need to know, how i can use my "Post" class to play video from Go function.
Related
I have 2 applications that use the free version of jqgrid.
The one that works has a Json array as follows;
Notice the value of data is [...]
For the application where the data does not get rendered;
Notice the value of data is NOT [...]. So what do I need to do to the data to get it in the correct format so that it will render?
EDIT
I think the data issue I raised originally was mistaken.
I have a jsFiddle of what I want and it works, see
https://jsfiddle.net/arame/cxh7zh3a/
But my code in my .Net MVC application does not. The grid is displayed with headers, but the data rows are not rendered.
var populateGrid = function (data) {
var grid = $("#grid");
grid.jqGrid({
data: data,
colNames: ["Contract No", "Title", ""],
colModel: [
{ name: "FullContractNo", label: "FullContractNo", width: 80, align: "center" },
{ name: "ContractTitle", label: "ContractTitle", width: 400, searchoptions: { sopt: ["cn"] } },
{ name: "Link", label: "Link", search: false, align: "center" }
],
cmTemplate: { width: 100, autoResizable: true },
rowNum: 20,
pager: "#pager",
shrinkToFit: false,
rownumbers: true,
sortname: "FullContractNo",
viewrecords: true
});
grid.jqGrid("filterToolbar", {
beforeSearch: function () {
return false; // allow filtering
}
}).jqGrid("gridResize");
$("#divLoading").hide();
}
var getGrid = function () {
var url = GetHiddenField("sir-get-selected-contract-list");
var callback = populateGrid;
dataService.getList(url, callback);
}
getGrid();
The code is a little different to the JsFiddle as the data is extracted from a Web API.
The data is correct however, as I put a breakpoint in and check it.
See
I have found the answer! I feel daft posting this, but for some reason I cannot fathom I had an old version of the jqGrid library. I had version 4.7 and the current version is 4.14.
With the right version it is now working.
I am trying to save Video recorded through Video.js to save on server, below is my code
<script>
var player = videojs("myVideo",
{
controls: true,
width: 320,
height: 240,
plugins: {
record: {
audio: true,
video: true,
maxLength: 41,
debug: true
}
}
});
player.on('startRecord', function()
{
console.log('started recording!');
});
player.on('finishRecord', function()
{
console.log('finished recording: ', player.recordedData);
});
function uploadFunction()
{
**//WRITE CODE TO SAVE player.recordedData.video in specified folder//**
}
</script>
Live Implementation : https://www.propertybihar.com/neo/videxp1/index.html
I was going through one the previously asked question, dint worked for me
How can javascript upload a blob?
If you scroll down to the "Upload" section on the README, you'll see this code snipped that does what you want, except for a streaming application:
var segmentNumber = 0;
player.on('timestamp', function() {
if (player.recordedData && player.recordedData.length > 0) {
var binaryData = player.recordedData[player.recordedData.length - 1];
segmentNumber++;
var formData = new FormData();
formData.append('SegmentNumber', segmentNumber);
formData.append('Data', binaryData);
$.ajax({
url: '/api/Test',
method: 'POST',
data: formData,
cache: false,
processData: false,
contentType: false,
success: function (res) {
console.log("segment: " + segmentNumber);
}
});
}
});
That is configured for continuously uploading the data but I've found I've had to make a few changes to it for my own setup:
On Chrome 64 with VideoJS 6.7.3 and VideoJS-Record 2.1.2 it seems that player.recordedData is not an array but just a blob.
I wanted to upload the video at a particular time, not streaming so I trigger the upload myself.
As a result, my upload code looks something like this:
if (player.recordedData) {
var binaryData = player.recordedData.video;
// ... Rest of that FormData and $.ajax snippet from previous snippet
}
If I don't do it this way, that check for existing data to upload always fails. I also trigger this code manually, rather than attaching it to the "timestamp" event of the player object. Of course, you'll need to have server side code that will accept this upload.
I am trying to make task for creating favicon images in GULP like this
var realFavicon = require ('gulp-real-favicon');
var fs = require('fs');
// File where the favicon markups are stored
var FAVICON_DATA_FILE = 'faviconData.json';
// Generate the icons. This task takes a few seconds to complete.
// You should run it at least once to create the icons. Then,
// you should run it whenever RealFaviconGenerator updates its
// package (see the check-for-favicon-update task below).
gulp.task('generate-favicon', function(done) {
realFavicon.generateFavicon({
masterPicture: 'TODO: Path to your master picture',
dest: 'TODO: Path to the directory where to store the icons',
iconsPath: '/',
design: {
ios: {
pictureAspect: 'noChange'
},
desktopBrowser: {},
windows: {
pictureAspect: 'noChange',
backgroundColor: '#da532c',
onConflict: 'override'
},
androidChrome: {
pictureAspect: 'shadow',
themeColor: '#ffffff',
manifest: {
name: 'MyApp',
display: 'browser',
orientation: 'notSet',
onConflict: 'override'
}
},
safariPinnedTab: {
pictureAspect: 'silhouette',
themeColor: '#5bbad5'
}
},
settings: {
scalingAlgorithm: 'Mitchell',
errorOnImageTooSmall: false
},
markupFile: FAVICON_DATA_FILE
}, function() {
done();
});
});
// Inject the favicon markups in your HTML pages. You should run
// this task whenever you modify a page. You can keep this task
// as is or refactor your existing HTML pipeline.
gulp.task('inject-favicon-markups', function() {
gulp.src([ 'TODO: List of the HTML files where to inject favicon markups' ])
.pipe(realFavicon.injectFaviconMarkups(JSON.parse(fs.readFileSync(FAVICON_DATA_FILE)).favicon.html_code))
.pipe(gulp.dest('TODO: Path to the directory where to store the HTML files'));
});
// Check for updates on RealFaviconGenerator (think: Apple has just
// released a new Touch icon along with the latest version of iOS).
// Run this task from time to time. Ideally, make it part of your
// continuous integration system.
gulp.task('check-for-favicon-update', function(done) {
var currentVersion = JSON.parse(fs.readFileSync(FAVICON_DATA_FILE)).version;
realFavicon.checkForUpdates(currentVersion, function(err) {
if (err) {
throw err;
}
});
});
Only problem I have is that i dont have faviconData.json can somebody share his, txanks
You should go back to Real Favicon Generator and follow the installation steps. Basically:
Replace the "TODO" in the generated code with actual paths.
Run gulp generate-favicon. This once-in-a-while task generates your icons and also the faviconData.json file you miss. For example this file contains the HTML markups that declare the icons.
Now you are ready to run gulp inject-favicon-markups whenever you deploy your site, update one of your pages, etc.
"favicons": {
"files": {
"src": "./dist/img/logo/favicon.png",
"dest": "./dist/img/favicons/",
"html": "./templates/misc/favicons.tpl.php",
"iconsPath": "./dist/img/favicons/",
"androidManifest": null,
"browserConfig": null,
"firefoxManifest": null,
"yandexManifest": null
},
"icons": {
"android": true,
"appleIcon": true,
"appleStartup": true,
"coast": true,
"favicons": true,
"firefox": true,
"opengraph": true,
"windows": true,
"yandex": true
},
"settings": {
"appName": "name",
"appDescription": "This is the app description",
"developer": null,
"developerURL": null,
"version": 1.0,
"background": null,
"index": null,
"url": null,
"silhouette": false,
"logging": true
},
"favicon_generation": null
},
maybe you can use this, you should change the settings of course :)
I have a flash object embedded into an Angular JS directive using the swf-object library. This is done in the link function. I am trying to develop a basic interface to the object via JavaScript so that I can change the position of some action-script Shape objects. I want to grab the initial position coordinates from the flash object within the link function so that I can initially populate local scope variables and bind to the view.
app.directive("flashTest", function() {
return {
restrict: "E", // add to a div
scope: true,
templateUrl: "flash/flash-test.html",
link: function($scope, element) {
/* Embed the swf */
var
flashVars= {},
flashParams= {
allowScriptAccess: "always",
allowFullScreen: "true"
},
attributes= {};
// embed
swfobject.embedSWF(
"/public/assets/flash/as-test/Main.swf",
"flash",
"550",
"400",
"11",
"/public/assets/flash/expressInstall.swf",
flashVars,
flashParams,
attributes
)
var
$elResetButton = element.find("button"),
flashDOMObject = document.getElementById("flash");
// setup scoped variables
$scope.j1x = flashDOMObject.j1x();
$scope.j1y = flashDOMObject.j1y();
$scope.j2x = flashDOMObject.j2x();
$scope.j2y = flashDOMObject.j2y();
$scope.j3x = flashDOMObject.j3x();
$scope.j3y = flashDOMObject.j3y();
// setup callbacks/watchers
$scope.$watch("j1x", function() { flashDOMObject.setJ1x($scope.j1x) });
$elResetButton.bind("click", reset);
function reset() {
flashDOMObject.reset();
}
}
};
});
However, flashDOMObject does not have the exposed (via ExternalInterface) method j1x() when I try to invoke it. I've debugged this and the reason is the browser has yet to make the http request for the SWF file (and therefore doesn't know about the javascript exposed api). Is there anyway to register a callback for the compilation and loading of the assets of the directive template so that I may populate the scope variables once the swf file is loaded?
UPDATE Current working solution making use of a timed delay of 50ms after the swf file loaded before using the externally exposed functions on the DOM element:
.directive("junctions", function($timeout) {
return {
restrict: "E", // add to a div
scope: true,
templateUrl: "flash/flash-test.html",
link: function($scope, element) {
/* Embed the swf */
var
flashVars= {},
flashParams= {
allowScriptAccess: "always",
allowFullScreen: "true"
},
attributes= {};
// embed
swfobject.embedSWF(
"/public/assets/flash/Junctions.swf",
"flash",
"550",
"400",
"11",
"/public/assets/flash/expressInstall.swf",
flashVars,
flashParams,
attributes,
function() {
$timeout(function() {
// setup scoped variables
$scope.j1x = flashDOMObject.j1x();
// setup callbacks/watchers
$scope.$watch("j1x", function() { flashDOMObject.setJ1x($scope.j1x) });
}, 50)
}
)
var
$elResetButton = element.find("button"),
flashDOMObject = document.getElementById("flash");
$elResetButton.bind("click", reset);
function reset() {
flashDOMObject.reset();
$scope.j1x = flashDOMObject.j1x();
}
}
};
});
Is there a more dependable way of detecting when action-script methods exposed via the ExternalInterface api are available to use?
I suspect it's not an Angular callback you need, but a callback from SWFObject once it's loaded. Looking at its docs, it does seem to provide a way of passing one.
swfobject.embedSWF(
"/public/assets/flash/as-test/Main.swf",
"flash",
"550",
"400",
"11",
"/public/assets/flash/expressInstall.swf",
flashVars,
flashParams,
attributes,
function() {
$scope.$apply(function() {
// Do post-SWF-loading here
});
}
)
It's probably a good idea to wrap the callback in $scope.$apply to make sure that any scope variable changes are properly processed by Angular.
Im new to sencha touch and going through the obligatory hair pulling and head2desk pounding.
Im trying to display a List but Im having a problem.
Im using a beforeshow event to load my json store before the list is displayed. But it's not firing the event. If any can help it is MOST appreciated.
My code is as follows: *note- this code is AS/400 centric so the /%...%/ is for that
function doList() {
var List1 = new Ext.List ({
id : List1,
renderTo : 'panel',
fullscreen: true,
showAnimation: {
type: 'slide',
duration: 250
},
cls: 'demo-list',
width: Ext.is.Phone ? undefined : 300,
height: 500,
store: ListStore,
itemTpl: '<strong>{SCEQPT}</strong>',
grouped: true,
indexBar: true,
onItemDisclosure: function(record, btn, index) {
doPopUp(record);
},
listeners: {
'beforeshow': function () {
alert('beforeshow');
var StoreList = Ext.StoreMgr.get('ListStore'
StoreList.load({
params: {
screfr: Ext.getCmp('SCREFR').getValue(),
scptyp: scptyp,
user : '/%SCUSER%/'
}
});
}
}
});
}
beforeshow listener is triggered only when you are displaying an item with show() method.
Try using the listeners
'render','beforerender' and 'afterrender'. instead.