I need to use both JWPlayer 6 and JWPlayer 7 in my expressJS, AngularJS project.
Normally each of them works fine individually.
I include them separately in index.html
<script src="/javascripts/jwplayer6.js"></script>
OR
<script src="javascripts/jwplayer7.js" ></script>
<script type="text/javascript">jwplayer.key="xxxx"; </script>
I have player.html and player.controler.js on angular side and I keep JWPlayer configuration object in player.controler.js
$scope.options = {
width: "400px",
aspectratio: "16:9",
autostart: true,
androidhls: true,
image: '/images/04212a71.abcd.png'
};
$scope.file = $sce.trustAsResourceUrl(url);
In player.html file, I have
ng-jwplayer directive to display players and,
<div>
<uib-tabset justified="true" style="padding-top: 45px;" >
<uib-tab heading="JWPlayer 6" select="changePlayer(jwp=7)"></uib-tab>
<uib-tab heading="JWPlayer 7" select="changePlayer(jwp=6)"></uib-tab>
</uib-tabset>
bootstrap Tab, I want to switch between players, when I select the Tab.
I used $rootscope in player.controller.js and ng-if in index.html to use custom jwplayer6 or jwplayer7, but it didn't work.
Also I tried to import custom jwplayer scripts in player.html, it also didn't work.
Does anyone have any idea how to include and manage both jwplayer6 and jwplayer7 in same project?
Thanks
I handled it using iframe. I keep player scripts in .ejs file and call them with an iframe in angular side. It works perfect.
Related
I'm running Umbraco version 7.9.2 and following this tutorial to learn how to create custom property editors.
My first step was to create a folder called MarkDownEditor
My second step was to create a file named package.manifest.json
{
//you can define multiple editors
"propertyEditors": [
{
/*this must be a unique alias*/
"alias": "My.MarkdownEditor",
/*the name*/
"name": "My markdown editor",
/*the icon*/
"icon": "icon-code",
/*grouping for "Select editor" dialog*/
"group": "Rich Content",
/*the HTML file we will load for the editor*/
"editor": {
"view": "~/App_Plugins/MarkDownEditor/markdowneditor.html"
}
}
],
//array of files we want to inject into the application on app_start
"javascript": [
"~/App_Plugins/MarkDownEditor/markdowneditor.controller.js"
]
}
I then created two files: markdowneditor.controller.js and markdowneditor.html in the MarkDownEditor directory
markdowneditor.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div ng-controller="My.MarkdownEditorController">
<textarea ng-model="model.value"></textarea>
</div>
</body>
</html>
markdowneditor.controller.js
angular.module("umbraco")
.controller("My.MarkdownEditorController",
//inject umbracos assetsService
function ($scope, assetsService) {
//tell the assetsService to load the markdown.editor libs from the markdown editors
//plugin folder
assetsService
.load([
"~/App_Plugins/MarkDownEditor/lib/Markdown.Converter.js",
"~/App_Plugins/MarkDownEditor/lib/Markdown.Sanitizer.js",
"~/App_Plugins/MarkDownEditor/lib/Markdown.Editor.js"
])
.then(function () {
//this function will execute when all dependencies have loaded
alert("editor dependencies loaded");
console.log('stuff has loaded!');
});
//load the separate css for the editor to avoid it blocking our js loading
assetsService.loadCss("~/App_Plugins/MarkDownEditor/lib/Markdown.Editor.css");
});
Finally, I registered the editor in the Umbraco CMS, put it in a simple document type and finally visited the page in multiple browsers.
And... I see nothing. It seems like the editor is working (I think) but I don't get why I'm not seeing my alert or console.log that's contained in the controller. What did I do wrong? I've tried multiple browsers so I know it's not a caching issue and I've made sure to rebuild the project in visual studio.
Edit 1 :
Per suggestions, I've tried modifying the assetService file paths since ~ seems to be a C# thing and my controller is a javascript file. It now looks like this
.load([
"/App_Plugins/MarkDownEditor/lib/Markdown.Converter.js",
"/App_Plugins/MarkDownEditor/lib/Markdown.Sanitizer.js",
"/App_Plugins/MarkDownEditor/lib/Markdown.Editor.js"
])
However, I'm still not seeing an alert or a console log.
One thing I did realize I was doing wrong was not including my markdown value in the markdown template. I've done that and now see the content that I put in the editor when creating a new markdown page.
Simple solution. My package.manifest file had a .json extension. When that was removed, everything worked perfectly. For anyone coming across this, the ~ works perfectly fine in the javascript file.
I don't have a backend to run angular, just static js/html files in S3, how to lazy load controllers/modules that are stored as static files inside S3?
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<script src="https://raw.githubusercontent.com/ocombe/ocLazyLoad/master/dist/ocLazyLoad.js"></script>
</head>
<body>
<h3>Lazy load succeded if you can see 'Hello world' below</h3>
<div id="example" ng-app="LazyLoadTest" ng-controller="TestController"></div>
<script>
angular.module("LazyLoadTest", ["oc.lazyLoad"])
.controller("TestController", function($scope, $ocLazyLoad, $compile) {
$ocLazyLoad.load("https://github.com/ocombe/ocLazyLoad/raw/master/examples/simpleExample/js/testApp.js").then(function() {
console.log('loaded!!');
var el, elToAppend;
elToAppend = $compile('<say-hello to="world"></say-hello>')($scope);
el = angular.element('#example');
el.append(elToAppend);
}, function(e) {
console.log('errr');
console.error(e);
})
});
</script>
</body>
</html>
I know about ocLazyLoad but only works for angular 1
Angular 4+ has a lazy loading option built into the routes. The Angular.io docs help explain how to accomplish that here.
https://angular.io/guide/lazy-loading-ngmodules
Keep in mind, Angular 4+ talks about "preloading", which may be the solution you are showing above. That would mean that after the initial load, all of the other modules will be queued up to load as well. You can read up on that here.
https://angular.io/guide/router#preloading-background-loading-of-feature-areas
As far as serving it from an AWS s3 bucket - You can create an angular app using the Angular CLI, then use "ng build --prod" to build dist files, and throw them in the bucket. Then whenever your index file is called it will bootstrap the rest of the Angular 4+ app with lazy loading.
The getting started guide can be found here.
https://angular.io/guide/quickstart
I'm using Bottle to make a simple web form and want to set the Selectize.js jquery plugin to a field so the user can set several values to that same field.
Inside my form tag I have the following code:
<label>
<span>Links :</span>
<input type="text" id="input-tags" name="links">
</label>
<script>
$('#input-tags').selectize({
persist: false,
createOnBlur: true,
create: true
});
</script>
And the following .js and .css inside the head tag:
<link href="/selectize.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/selectize.js"></script>
To deal with static files I have the following route in my .py script:
#get('/<filename:re:.*\.js>')
def javascripts(filename):
return static_file(filename, root='static/js')
#get('/<filename:re:.*\.css>')
def stylesheets(filename):
return static_file(filename, root='static/css')
My route to deal with static files seems to be working properly 'cause I've tested it with other jquery plugin that does not use explicit code within the html file.
On this one, the problem seems to be on the explicit script code bellow the label tag. I found some articles about dealing with JSON but couldn't make it work (I also don't know if that is the right way to go).
Well, my best option was to put that explicit javascript into a new javascript file and add its path to the html like:
<script type="text/javascript" src="/<script_path_here>"></script>
That way my functions that handles the static files on the .py would do their job.
I am using JW Player to play videos. But its throwing Error loading player:
HTML5 player not found.
My Code:
<%= jwplayer_assets %>
<div id="mediaplayer", align="center">
</div>
<script type="text/javascript">jwplayer.key="wjl6yMFUQPDP";</script>
<script type="text/javascript">
jwplayer("mediaplayer").setup({
flashplayer: "<%= asset_path('player.swf') %>",
file: "<%=#video_url%>",
height: 360,
width: 640
});
</script>
please help me to solve this problem.
Here is a working copy.
You can clone or download it as zip file
https://github.com/shamsulsham89/jwplayer-rails3.2
and run it on your system. But update the browser to latest version so that it supports the html5 otherwise it will throw error.
Steps to run:
1> bundle install
2> rails s
Go to the show page after starting rails server from index page.
Im trying to implement TinyMCE on Django, i have successfully implement it on admin page using settings like this :
admin.py:
class TinyMCEAdmin(admin.ModelAdmin):
class Media:
js = ('/media/js/tiny_mce/tiny_mce.js', '/media/js/tiny_mce/textareas.js',)
settings.py :
TINYMCE_JS_ROOT = '/media/js/tiny_mce/'
TINYMCE_JS_URL = '/media/js/tiny_mce/tiny_mce.js'
then when i try to implement it on my form(non-admin) :
forms.py:
from tinymce.widgets import TinyMCE
class Foo(forms.Form):
title = forms.CharField(max_length = 100)
content = forms.CharField(widget = TinyMCE())
When i see the result, it just showing plain html textarea, then i hit "F12" on Chrome, then it says : 'Uncaught reference error: tinyMCE is not defined'.
How do i fix that error? thx guys
Looking at the documentation, if you are using TinyMCE in your form outside of the admin, you need to tell it to include the JS/CSS required to render TinyMCE manually. So in your base template (or somewhere similar) you need to add:
<head>
...
{{ form.media }}
</head>
or you could simply manually load the js:
<head>
<script src="{{ MEDIA_URL }}js/tiny_mce/tiny_mce.js"></script>
<script src="{{ MEDIA_URL }}js/tiny_mce/textareas.js"></script>
</head>
but the former is probably easier
Looks like the file tiny_mce.js has not been loaded in this case.