I am creating a web player that support both html5 and flash. I am using vue-video-player and wrapping in in a component.
I have installed both videojs-flash and videojs-flvjs.
import Vue from 'vue'
import VueVideoPlayer from 'vue-video-player'
// import VideoJsFlash from 'videojs-flash'
// import VideoJsFlash from 'videojs-flvjs'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
// const { videojs } = VueVideoPlayer
// videojs.plugin('flashPlugin', VideoJsFlash)
// videojs.addLanguage('ml', myLanguageObject)
// videojs.registerPlugin('flashPlugin', VideoJsFlash)
Vue.use(VueVideoPlayer)
Then my playerOptions are
playerOptions: {
// videojs options
muted: true,
language: 'en',
techOrder: ['html5', 'flvjs'], // or ['html5', 'flash']
playbackRates: [0.7, 1.0, 1.5, 2.0],
width: '800px',
height: '800px',
plugins: {
},
flash: {
swf: './#/assets/video-js.swf'
},
poster: './#/assets/logo.png',
sources: [
]
}
I hope to play the video
The error I get is as follows,
video.cjs.js?0e26:441 VIDEOJS: ERROR: The "flvjs" tech is undefined. Skipped browser support check for that tech.
PlayVid.vue?139b:134 the player is readied Player {player_: Player, options_: {…}, id_: "vjs_video_506", name_: null, eventBusEl_: div#vjs_video_506.video-js.vjs-paused.vjs_video_506-dimensions.vjs-controls-enabled.vjs-workinghover…, …}
video.cjs.js?0e26:441 VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported. MediaError {code: 4, message: "The media could not be loaded, either because the …rk failed or because the format is not supported."}
import Vue from 'vue'
import VueVideoPlayer from 'vue-video-player'
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'
import 'videojs-flash'
Vue.use(VueVideoPlayer)
and playerOptions
playerOptions: {
// videojs options
muted: true,
language: 'en',
techOrder: ['html5', 'flash'],
playbackRates: [0.7, 1.0, 1.5, 2.0],
width: '800px',
height: '800px',
poster: './#/assets/logo.png',
sources: [{
type: "video/x-flv",
src: "https:/
}]
}
Related
I am working on a simple nuxt.js project that plays two audio files and asks the user to determine the audio interval between them. I am currently unable to play any audio files. I took in this solution (https://nuxtjs.org/docs/features/configuration/#extend-webpack-to-load-audio-files) but its not working
also I added in nuxt.config.js
loaders: {
vue: {
transformAssetUrls: {
audio: 'src',
},
},
},
extend(config, ctx) {
config.module.rules.push({
test: /\.(ogg|mp3|wav|mpe?g)$/i,
loader: 'file-loader',
options: {
name: '[path][name].[ext]'
}
})
}
and here my code
<div class="col-sm-12 col-sm-offset-2">
<audio
src="#/assets/audios/podcast1.mp3"
controls
class="audio my-3"
></audio>
</div>
I disabled the esmodule then my audio file working
In nuxtconfigure do like this
extend(config, ctx) {
config.module.rules.push({
test: /\.(ogg|mp3|wav|mpe?g)$/i,
loader: 'file-loader',
options: {
name: '[path][name].[ext]',
esModule: false,
I have a similar problem. But in my case, I play the sound alert from the code.
This code worked previously:
const audio_file = require('#/assets/beeps/some_beep.mp3')
const beep = new Audio(audio_file)
beep.play()
But after the update stopped working.
Fix the problem helped:
const audio_file = require('#/assets/beeps/some_beep.mp3').default
I learned it here:
https://amjohnphilip.medium.com/how-to-work-with-audio-files-in-nuxt-js-8da7abb3c5bb
I am running angular 9 on IE11. In tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es2015",
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2017",
"dom"
]
},
"angularCompilerOptions": {
"strictInjectionParameters": true
}
}
Yes, it will work if I use "target": "es5" instead of "target": "es2015".
So my question is can I use "target": "es2015" to run angular 9 on IE11? I am getting an error though.
Error: err
I have commented all the core-js/.. imports from polyfills.ts.
Because: https://stackoverflow.com/a/56893234/14208324
polyfills.ts:
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
// import 'core-js/es6/symbol';
// import 'core-js/es6/object';
// import 'core-js/es6/function';
// import 'core-js/es6/parse-int';
// import 'core-js/es6/parse-float';
// import 'core-js/es6/number';
// import 'core-js/es6/math';
// import 'core-js/es6/string';
// import 'core-js/es6/date';
// import 'core-js/es6/array';
// import 'core-js/es6/regexp';
// import 'core-js/es6/map';
// import 'core-js/es6/weak-map';
// import 'core-js/es6/set';
import 'classlist.js';
/** IE10 and IE11 requires the following for the Reflect API. */
// import 'core-js/es6/reflect';
/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
// import 'core-js/es7/reflect';
/**
* Web Animations `#angular/platform-browser/animations`
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
**/
import 'web-animations-js'; // Run `npm install --save web-animations-js`.
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
Angular and Anglura-cli version:
Angular CLI: 9.1.12
Node: 10.15.3
OS: win32 x64
Angular: 9.1.12
Note: If I use "target": "es5" as target, no error is being shown but the page remains blank. App is working on chrome and firefox.
Am I missing something?
The Angular app will not work with the IE browser if the target is set as es2015.
I did not get any way to make the angular app work in the IE browser with the target set as es2015.
So there is no way to support the angular app by using the target as es2015.
User needs to set the target as es5 to support the IE browser.
I tried this sample code, but csv file can't be read.
I put the csv file in the exact location. (same with the directory of index.html)!
Not with csv file (with array data), it perfectly works.
Has the grammar rule changed or is there a mistake in the code?
If anyone can check if this code works or can help me anyhow, It'll be really appreciated.
var chart = c3.generate({
data: {
url: '/data/c3_test.csv',
type: 'line'
}
});
setTimeout(function () {
chart.load({
url: '/data/c3_test2.csv'
});
}, 1000);
setTimeout(function () {
chart.load({
columns: [
['data1', 130, 120, 150, 140, 160, 150],
['data4', 30, 20, 50, 40, 60, 50],
],
unload: ['data2', 'data3'],
});
}, 2000);
setTimeout(function () {
chart.load({
rows: [
['data2', 'data3'],
[120, 300],
[160, 240],
[200, 290],
[160, 230],
[130, 300],
[220, 320],
],
unload: 'data4',
});
}, 3000);
Maybe you are loading the model using either file:// or C:/, which stays true to the error message as they are not http://.
You can confirm that this is the error message that you're getting on your browser's console. But I did what you asked and I got the "Fetch API cannot load file:///C:/data.csv. URL scheme must be "http" or "https" for CORS request." and the csv file could not be loaded either.
So you can either install a webserver in your local PC or upload the model somewhere else and change the url to http://somehost/path/to/file
As an alternative, If you're using Chrome, you can try starting it from the terminal with the --allow-file-access-from-files
Browsers don't allow file:// URLs with ajax calls (for security reasons). You need to load your web page through a web server and make your ajax request through that web server using http:// or https://, not file://
I am trying to use ES6 modules in my current GULP setup. I've read that this is yet to be supported by browsers or Babel, so there is a need some elaborate setup to make this work, using things such Browserify, babelify, vinyl-source-stream. (Seems extremely complex setup).
What I want is different from examples I had found online. All the examples are with external files being imported, and I really don't want that. I want all the files to be bundled into a single file, with all the modules there already. Here's what I have:
My current GULP setup is like this:
gulp.task('buildJS', function() {
var src = [
'./js/dist/app.js',
'./js/dist/templates.js',
'./js/dist/connect.js',
'./js/dist/config.js',
'./js/dist/utilities.js',
'./js/dist/components/*.js',
'./js/dist/pages/**/*.js',
'./js/dist/modals/*.js',
'./js/dist/init.js' // must be last
];
gulp.src(src)
.pipe(concat('app.js'))
.pipe(babel({modules:"common"})) // I have no idea what "modules" actually does
.pipe(gulp.dest('../js/'))
});
And this is an example of a component file in /js/dist/components/.
There are many files like this, and they are all combined to a single file.
module "components/foo" {
export function render(settings) {
return ...
}
}
So later in some page controller I would use it:
import { render } from "components/foo";
Question:
Now that I have a single file, (been transformed using Babel), how can I use the modules via Import?
No, don't naively concatenate the files. Use browserify to bundle them, with babelify to compile them (via babel). A basic example would look something like this:
browserify('./entry')
.transform(babelify)
.bundle()
// ...
It's hard to give more specific advice because your use case is so unclear. Do you have a dependency graph that begins at one file, or are you trying to bundle together a bunch of indepdendent modules? Are you trying to run a script to kick off an application, or do you just want to be able to access modules individually?
Based on the example you linked to in your comment you should have something like this:
components/doughnut.js
export default function Doughnut (settings = {}) {
// ...
};
Doughnut.prototype = {}
routes/home.js
import Doughnut from './components/doughnut';
export default function () {
var component = new Doughnut();
$('body').html(component.render());
};
Have each module export what you want to be available from any other module. Have each module import whatever it needs from any other module(s). Whatever uses the controller from this example should then do import home from './routes/home'; These modules aren't tied to a global variable App and can be reused in other applications (as long as you otherwise make them reusable).
.pipe(babel({modules:"common"})) // I have no idea what "modules"
modules is a babel option that determines what module format it compiles ES6 module syntax to. In this case, CommonJS.
module "components/foo" {
Thanks to your comments I now understand why you have this. You need to eliminate that. Your component file should look something like:
export function render (settings) {
return ...
}
Paired with:
import { render } from "components/foo";
Or if you want a default export / import:
export default function render (settings) {
return ...
}
import render from "components/foo";
import { render } from "components/foo";
If you're browserifying your modules, you're probably going to need to use relative paths like ./components/foo or use something else to deal with the paths, like babel's resolveModuleSource option.
Since the end of 2015 I have been using rollupjs in order to create a bundle of ES2015 (ES6) modules, so I could use import/export freely in my code.
I've found Rollupjs to be very good and easy to use. The people behind
it are great people which devote themselves to the project. I've had
many questions which I had posted on the project's Github issues page
and I always got answered pretty quickly.
Setup includes these rollupjs plugins:
rollup (basic rollupjs bundler)
rollup-plugin-babel (converts ES2015 code to ES5 or earlier, for legacy browsers support)
rollup-plugin-eslint (verify the javascript code is valid)
rollup-plugin-uglify (minify the code, to make it smaller)
rollup-plugin-progress (shows bundle progress in terminal. shows which file being "worked on")
beepbeep (Make a console beep sound. I use this to inform me of compilaction errors)
Simplified GULP setup I'm using:
var gulp = require('gulp'),
gutil = require('gulp-util'),
rollup = require('rollup').rollup,
babelRollup = require('rollup-plugin-babel'),
eslintRollup = require('rollup-plugin-eslint'),
uglifyRollup = require('rollup-plugin-uglify'),
rollupProgress = require('rollup-plugin-progress'),
beep = require('beepbeep');
// ESlint
var eslint_settings = {
rulePaths: [],
rules: {
"no-mixed-spaces-and-tabs" : [2, "smart-tabs"],
"block-spacing" : [2, "always"],
"comma-style" : [2, "last"],
"no-debugger" : [1],
"no-alert" : [2],
"indent-legacy" : [1, 4, {"SwitchCase":1}],
'strict' : 0,
'no-undef' : 1
},
ecmaFeatures : {
modules: true,
sourceType: "module"
},
"parserOptions": {
"ecmaVersion" : 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": false,
"experimentalObjectRestSpread": true
}
},
globals : ['$', '_', 'afterEach', 'assert', 'beforeEach', 'Cookies', 'd3', 'dataLayer', 'describe', 'done', 'expect', 'ga', 'it', 'jQuery', 'sinon'], baseConfig: {
//parser: 'babel-eslint',
},
envs: [
'browser', 'es6'
]
};
// Rollup plugins configuration
function getRollupPlugins( settings = {} ){
var rollupPlugins = [];
rollupPlugins.push({
presets : [['es2015', {"modules": false}]], //['es2015-rollup'],
runtimeHelpers : true,
exclude : 'node_modules/**',
plugins : ["external-helpers"]
});
rollupPlugins.push(eslintRollup( Object.assign({throwOnError:true}, eslint_settings) ))
rollupPlugins.push(rollupProgress({
clearLine:true // default: true
}))
// I would advise Babel to only be used for production output since it greatly slower bundle creation
if( settings.ENV == 'production' ){
rollupPlugins.push(uglifyRollup())
rollupPlugins.push(babelRollup(rollupPlugins__babel));
}
return rollupPlugins;
}
var rollupPlugins = getRollupPlugins();
/**
* a generic Rollup bundle creator
* #param {String} outputPath [where to save the bundle to (must end with /)]
* #param {String} outputFileName [bundle file name]
* #param {String} entryFile [rollup entry file to start scanning from]
* #return {Object} [Promise]
*/
function rollupBundle(outputPath, outputFileName, entryFile, bundleOptions){
bundleOptions = bundleOptions || {};
bundleOptions.plugins = bundleOptions.plugins || rollupPlugins;
return new Promise(function(resolve, reject) {
outputFileName += '.js';
var cache;
// fs.truncate(outputPath + outputFileName, 0, function() {
// gutil.log( gutil.colors.dim.gray('Emptied: '+ outputPath + outputFileName) );
// });
rollup({
entry : entryFile,
plugins : bundleOptions.plugins,
cache : cache
})
.then(function (bundle) {
var bundleSettings = {
format : bundleOptions.format || 'umd',
sourceMap : false,
banner : config.banner
},
result = bundle.generate(bundleSettings),
mapFileName = outputFileName + '.map',
sourceMappingURL = '\n//# sourceMappingURL='+ mapFileName;
cache = bundle;
// if folder does not exists, create it
if( !fs.existsSync(outputPath) ){
gutil.log( gutil.colors.black.bgWhite('Creating directory ' + outputPath) );
fs.mkdirSync(outputPath);
}
// save bundle file to disk
fs.writeFile( outputPath + outputFileName, result.code + (bundleSettings.sourceMap ? sourceMappingURL : ''), function(){
resolve();
});
// save map file to disk
if( bundleSettings.sourceMap )
fs.writeFile( outputPath + mapFileName, result.map.toString());
})
.catch(function(err){
beep(1);
gutil.log( gutil.colors.white.bgRed('Rollup [catch]: ', err.stack) );
resolve();
})
});
}
// This task bundles the main application, using an entry file which itself has many imports,
// and those imports also has imports.. like a tree branching
gulp.task('bundle-app', ()=>{
return rollupBundle('../dist/js/', 'app', 'js/dist/app.js', {format:'cjs'});
});
I've got some js code in a chrome background extension of the following :
function handleCapture(stream) {
console.log('content captured');
console.log("backround.js stream: ", stream);
alert(stream);
// localStream = stream; // used by RTCPeerConnection addStream();
// initialize(); // start signalling and peer connection process
}
function captureCurrentTab() {
console.log('reqeusted current tab');
chrome.tabs.getSelected(null, function(tab) {
console.log('got current tab');
var selectedTabId = tab.id;
chrome.tabCapture.capture({
audio : false,
video : true
}, handleCapture);
});
}
However, when this is ran, the "handleCapture" variable "stream" that is passed in is always undefined? Is this to be expected or is there something that I am missing here?
Also, I've confirmed that my manifest.json contains the capture permission and I am using chrome canary Version 31.0.1607.1 canary Aura.
Thanks,
Mike
I had this same issue when I was trying to drive a tabCapture purely from a background script, I found this on the tabCapture reference page:
Captures the visible area of the currently active tab. This method can only be used on the currently active page after the extension has been invoked, similar to the way that activeTab works. Note that Chrome internal pages cannot be captured.
My understanding is that this means you need to drive it from a browserAction for your extension, like so:
chrome.browserAction.onClicked.addListener(function(request) {
chrome.tabs.getSelected(null, function(tab) {
chrome.tabCapture.capture({audio: true, video: true}, callback);
});
});
That's what worked for me.
You should probably provide some constraints to make it work. See:
http://developer.chrome.com/extensions/tabCapture.html#type-MediaStreamConstraint
The capture param you provided is a MediaTrackConstraint, see:
http://dev.w3.org/2011/webrtc/editor/getusermedia.html#mediastreamconstraints
that is also a simple JS object, where you should set some mandatory options, see:
http://dev.w3.org/2011/webrtc/editor/getusermedia.html#idl-def-MediaTrackConstraints
So the following should help, if you set all the needed settings in mandatory object:
chrome.tabCapture.capture({
audio : false,
video : true,
videoConstraints: {
mandatory: {
width: { min: 640 },
height: { min: 480 }
}
}
}, handleCapture);