I built this bit of code from a pretty long search on the web full of failures trying with various players to play this,
http://85.132.71.4:1935/turktv/ntv.sdp/playlist.m3u8
m3u8 stream. I will put up my compact(paste it into an html file) code in here in hopes someone can point me in the right direction. Thank you for reading.
<html>
<head>
<title>test page</title>
</head>
<body>
<script type='text/javascript' src='http://dev.landgraaf.net/jwplayer.js'></script>
<div id='livefeed'></div>
<script type="text/javascript">
jwplayer('livefeed').setup({
'id': 'playerID',
'width': '480',
'height': '300',
'provider': 'video',
'file': 'http://85.132.71.4:1935/turktv/ntv.sdp/playlist.m3u8',
'image': 'http://dev.landgraaf.net/webcam.jpg',
'bufferlength':5,
'modes': [
{type: 'flash', src: 'http://dev.landgraaf.net/player.swf'},
{
type: 'html5',
config: {
levels: [ {'file': 'http://85.132.71.4:1935/turktv/ntv.sdp/playlist.m3u8'} ],
'provider': 'video',
'x-webkit-airplay': 'allow'
}
}
]
});
</script>
</body>
</html>
M3U8 does not run in Flash mode in JW5. You would need JW6 for this. Here is some more information - http://www.longtailvideo.com/support/jw-player/28856/using-apple-hls-streaming, if you would like a trial of us, please contact us - http://www.jwplayer.com/contact-us/
Related
In reference to this example for mapbox-gl-js...
https://www.mapbox.com/mapbox-gl-js/example/3d-extrusion-floorplan/
When I run this example code with my api key, I only get the map centered on the "Field Museum of Natural History" without any walls extruded. What am I missing here? The other examples seem to work straight out of copy paste.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiYWtpbmh3YW4iLCJhIjoiY2lwNGYxNDhlMDAwcnZsbTVnY3R0eXo3ZSJ9.XED4AbQBkX8E9qqnwplnWw';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-87.61694, 41.86625],
zoom: 15.99,
pitch: 40,
bearing: 20
});
map.on('load', function() {
map.addLayer({
'id': 'room-extrusion',
'type': 'fill-extrusion',
'source': {
// Geojson Data source used in vector tiles, documented at
// https://gist.github.com/ryanbaumann/a7d970386ce59d11c16278b90dde094d
'type': 'geojson',
'data': 'https://www.mapbox.com/mapbox-gl-js/assets/data/indoor-3d-map.geojson'
},
'paint': {
// See the Mapbox Style Spec for details on property functions
// https://www.mapbox.com/mapbox-gl-style-spec/#types-function
'fill-extrusion-color': {
// Get the fill-extrusion-color from the source 'color' property.
'property': 'color',
'type': 'identity'
},
'fill-extrusion-height': {
// Get fill-extrusion-height from the source 'height' property.
'property': 'height',
'type': 'identity'
},
'fill-extrusion-base': {
// Get fill-extrusion-base from the source 'base_height' property.
'property': 'base_height',
'type': 'identity'
},
// Make extrusions slightly opaque for see through indoor walls.
'fill-extrusion-opacity': 0.5
}
});
});
</script>
</body>
</html>
Thanks Everyone for your help
This example has a CORS issue
Failed to load file:///mapbox-gl-js/assets/indoor-3d-map.geojson: Cross origin requests are only supported for protocol schemes:
A simple workaround is to download the geojson from the github gist and save it locally in the same directory as your .html file. Then you can add it as a mapbox layer source, e.g:
'data': 'indoor_3D_map_example.geojson'
Because your data and code aren't in the same domain name. You can build a sever, then publish the data and code. You can make it.
Every time JWPlayer finished playing a video it fades to black. I'd rather it just showed the last frame of the video. Is there any way to do that?
<script type="text/javascript" src="jwplayer.js" ></script>
<script type="text/javascript">
function changeVideo(filename) {
jwplayer("video").remove();
jwplayer("video").setup({
file: filename,
image: "img.jpg",
height: 640,
width: 480,
controlbar: 'none',
icons: 'false'
});
jwplayer('video').load();
jwplayer('video').play();
}
</script>
</head>
<div id="video"></div>
<body>
<script type="text/javascript">
jwplayer("video").setup({
file: "vid.mp4",
image: "img.jpg",
height: 640,
width: 480,
controlbar: 'none',
icons: 'false'
});
</script>
<p>Vid2</p>
It won't show the last frame of the video, but you can just supply a poster image, which it will show before playing and after playing. Better than a blank screen.
You can use our JavaScript API to stop a second before the end of the video.
I actually wrote a small plugin for this.
Demo - http://www.pluginsbyethan.com/github/stopatend.html
Plugin - https://github.com/emaxsaun/stopatend
Hope this helps you!
Edit:
For your changeVideo function, use this instead:
function changeVideo(filename) {
jwplayer("video").setup({
file: filename,
image: "img.jpg",
height: 640,
width: 480,
controlbar: 'none',
icons: 'false',
autostart: true
});
}
By calling setup you are basically removing already, and you can't just do a load() by itself, and doing load() is the same as autostart = true, try that.
Here is a full HTML page of how to do this.
I could not add the full stop at end script here because it was too long for the answer, but I've tested this and it works.
<!DOCTYPE html>
<html>
<head>
<title>Change Video</title>
<script src="http://p.jwpcdn.com/6/12/jwplayer.js" type="text/javascript"></script>
</head>
<body>
<div id="player"></div>
<script type="text/javascript" language="javascript">
jwplayer("player").setup({
file: "http://content.bitsontherun.com/videos/w5co0c24-hV866gPy.mp4",
image: "img.jpg",
height: 640,
width: 480,
controlbar: 'none',
icons: 'false'
});
//PUT ENTIRE STOP AT END SCRIPT HERE
function changeVideo(filename) {
jwplayer("player").setup({
file: filename,
image: "img.jpg",
height: 640,
width: 480,
controlbar: 'none',
icons: 'false',
autostart: true
});
//PUT ENTIRE STOP AT END SCRIPT HERE
}
</script>
<p><a href="#" onclick='changeVideo("http://vjs.zencdn.net/v/oceans.mp4");'>Vid2</a></p>
</body>
</html>
There is a much easier way to show the image at the end of the video. Just include this code:
playerInstance.onComplete(function() {
playerInstance.stop();
});
This works in jwplayer version 7. If you use version 6 you want to upgrade to 7 to get rid of the logo. You need a key for 7, but it is free for personal use.
I use this function with multiple videos in a custom playlist. The entire Javascript code looks like this:
<script type="text/javascript">
var playerInstance = jwplayer("myElement");
playerInstance.setup({
file: "fileA.mp4",
image: "fileA.jpg",
width: 996,
height: 560,
captions: {
fontSize: 12,
backgroundOpacity: 50
},
tracks: [{
file: "fileA.srt",
"default": true
}]
});
playerInstance.onComplete(function() {
playerInstance.stop();
});
function playVideo(video,img,cc) {
playerInstance.load([{
file: video,
image: img,
tracks: [{
file: cc,
"default": true
}]
}]);
playerInstance.play();
};
</script>
A click in your custom playlist should result in a call to playVideo. If you don't use captions you can omit cc and the captions and tracks blocks. Every video will show its corresponding image when playing is complete.
i plug some utility files to the main application.
But on function Flang() from there is not referenced: web sniffer in console issues:
ReferenceError: FLang is not defined
index.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
...
<script type="text/javascript" src="application.js" ></script>
<script type="text/javascript" src="js/menu.js" ></script>
<script type="text/javascript" src="js/lang.js" ></script>
<script type="text/javascript" src="js/directories/assortment.js" ></script>
<title id="page-title">Main Application v.2.0</title>
...
lang.js:
...
function FLang(str){
if (ComboBoxLang.getValue()=='en')
return str;
else if (ComboBoxLang.getValue()=='ru')
return FappLangRu(str);
else
return str;
};
In the network inspector i see this file lang.js loaded, yet still this function is not defined:
at application.js (last line in this snippet):
application.js:
Ext.Loader.setPath('Ext.ux', '../app/extjs/examples/ux');
Ext.require([
'Ext.ux.grid.FiltersFeature',
'Ext.ux.grid.*',
]);
Ext.ns("appMain");
...
appMain.NorthRegion = Ext.create('Ext.panel.Panel', {
region: 'north',
xtype: 'panel',
id: 'NorthRegion',
border:true,
title: FLang('Subsystems'),
appMain.WestRegion= Ext.create('Ext.panel.Panel', {
region: 'west',
xtype: 'panel',
collapsible: true,
floatable: true,
width: 100,
split: true,
border:true,
title: FLang('Subsystem control'),
}); // end of $WestRegion
appMain.CenterRegion = Ext.create('Ext.tab.Panel', {
region: 'center',
xtype: 'tabpanel',
border: true,
title: FLang('Main window'),
autoScroll:true,
});
Does it somehow relate to namespacing, since prior to that without namespacing there was no reference problem?
Edits
After defining all the regions and their contents, we start app this way:
Ext.onReady(function() {
var MainView = Ext.create('Ext.Viewport', {
layout:'border',
border:true,
items:[
appMain.NorthRegion,
appMain.WestRegion,
appMain.CenterRegion
], // end of viewport items
});
}); // end of Ext.onReady() function
Try to change order of including lang.js and application.js in your index.html. However, even if it does work there is still one problem. You must not create components before the document is ready, hence, all Ext.create calls must be wrapped in onReady.
See Ext/Touch Component Life Cycle to learn more.
I am following this small tutorial:
http://docs.sencha.com/extjs/4.2.1/#/guide/application_architecture
I have used the exact same file structure, but when I add the controller section of the tutorial (to my app.js), where the code says:
`Ext.application({
...
controllers: [
'Users'
],
...
});
I get the error shown on the attached image. The system is looking for the controller folder the wrong place. Instead of looking for the file in the following path:
accountmanager/app/controller/Users.js
it looks in:
accountmanager/app/ext-4/app/controller/Users.js
So looking at the tutorial I'm following, the place that causes the trouble, is the section "Defining a controller"
I'm not sure what I have done wrong, I've starred myself blind for an hour now. Here is the index.html file:
<html>
<head>
<title>Account Manager</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<script type="text/javascript" src="ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
Note the slight difference in the html. Fx. I have only changed the js src reference, since the one in the tutorial causes a 404
Can anyone help out. I'd be grateful.
Thanks in advance
In case you wanna see the app.js code as well:
Ext.application({
requires: ['Ext.container.Viewport'],
name: 'AM',
controllers: [
'Users'
],
appFolder: 'app',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'panel',
title: 'Users',
html : 'List of users will go here'
}
]
});
}
});
Your app.'s and index.html files is located in the wrong place.
Put it in the root account manager directory
According to the example in this website, I followed the steps, but I dont get any output in the browser.
As Stated in the example, the file "index.html" should be in the following path
'D:\xampp\htdocs\helloext\extjs\index.html'
and its"index.html" contents are the following:
<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
when I run this example in both Chrome or FireFox, however, there is not output to be displayed.
Please guide me to have this samll example run correctly
Did you follow the instructions at the end of section 2.1 (Application Structure)? You need to create the app.js file:
Now you're ready to write your application code. Open app.js and
insert the following JavaScript code:
Ext.application({
name: 'HelloExt',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
title: 'Hello Ext',
html : 'Hello! Welcome to Ext JS.'
}
]
});
}
});