The Free Web Video Player
The Free Web Video Player´s offical project repo (finally on github).
Visit the project´s homepage: projekktor.com
A fine selection of demos showing the player in action: Demos
The texts we call a documentation: Docs
Hello,
Projekktor on IE 11 sends out 'PAUSED' when the video is fully played and not 'COMPLETED' as explained http://www.projekktor.com/docs/events.
Is there any other way to detect the end of a video?
In projekktor version 1.3.09 we found bug related to cover. We cannot display cover when we use HTML5 with type 'audio/mp3'.
To solve this issue we moved 2 lines of cover attachment in method applyMedia (line 5587)
Screenshot of git:
cannot open/view psd nor png
Fullscreen mode shows cover only on the half of the screen.
This is probably problem with style of div element (div with class projekktor). The height of this element is not set to 100% like for example in Firefox but is set in pixels.
See html part below:
Firefox 34.0
<div id="lorguhui" class="projekktor pp pphttp ppstatepaused fullscreen" style="height: 100%; position: absolute; display: block; top: 0px; left: 0px; width: 100%; z-index: 99999; margin: 0px; padding: 0px;">
...
<img id="lorguhui_media_image" style="-moz-user-select: none; position: absolute; border: 0px none; margin: 0px; padding: 0px; width: 62%; height: 100%; left: 19%; top: 0%;" unselectable="on" alt="..." src="...">
...
</div>Safari 7.1
<div id="smryondx" class="projekktor pp pphttp ppstatepaused fullscreen" style="height: 384px; position: absolute; display: block; top: 0px; left: 0px; width: 100%; z-index: 99999; margin: 0px; padding: 0px;">
...
<img id="smryondx_media_image" style="-moz-user-select: none; position: absolute; border: 0px none; margin: 0px; padding: 0px; width: 60%; height: 100%; left: 20%; top: 0%;" unselectable="on" alt="..." src="...">
...
</div>in Firefox height: 100%, in Safari height: 384px
Is it possible to add parameters to player embed url so it will start playback at given position and play for a specified length of time?
?start=30&end=45
Hi im trying to make the video player responsive heres my code:
when i put width : 100% and height 100% the video dissapears but i have sound how i can fix this.
thank you.
<!-- Load projekktor css -->
<link rel="stylesheet" href="themes/maccaco/projekktor.style.css" type="text/css" media="screen" />
<!-- Load jquery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- load projekktor js -->
<script type="text/javascript" src="projekktor-1.4.00-test.js"></script> </head>
<body>
<div id="player_a" class="projekktor">
<noscript><p>No JavaScript support.</p></noscript>
</div>
<script type="text/javascript">
$(document).ready(function() {
projekktor('#player_a', {
controls: true,
autoplay: true,
title: 'Projekktor - Inline HLS video support',
playerFlashMP4: 'swf/StrobeMediaPlayback/StrobeMediaPlayback_hls_mss.swf',
playerFlashMP3: 'swf/StrobeMediaPlayback /StrobeMediaPlayback_hls_mss.swf',
width: 640,
height: 385,
platforms: ['browser', 'ios', 'android', 'flash', 'native'],
playlist: [
{
0: {src: "http://ip:1935/videostreaming/videostreaming/playlist.m3u8", type: "application/mpegURL", streamType: "httpVideo"}, // your HLS manifest goes here
1: {src: "", type: "video/mp4", streamType: "http"} // you can even add progressive fallback
}
]
}
);
});
</script>
</body>
There is an issue concerning enabled autoplay in Safari 7: When opening a page (especially in a new tab), the video won't start more often than not. The video remains in a loading state forever (rotating load indicator). A page refresh "solves" this problem. To reproduce this, add
autoplay: true,
to the video config in the readme.html of the current release and open it in Mac OS 10.9.2 using Safari 7.0.2. I have been able to reproduce it on a second installation as well.
With other words: We try to create the best truely free web media player – period.
Should be
With other words: We try to create the best truly free web media player – period.
I would have fixed html and submitted a pull request but I didn't see a repo for the main website.
I'm not quite sure if this is a bug or misconfiguration on my site but I've ran into the following problems:
I'm having a video element like this one:
<video width="560" height="315" controls poster="https://media.example.com/videos/video_standbild_560x315.jpg">
<source src="https://media.example.com/videos/video_560x315.mp4" type="video/mp4">
</video>
Which I'm initializing with these options:
{
autoplay: true,
volume: 0.8,
platforms: ['flash']
}
So, basically I want to limit it to a specific platform, 'flash' in this example (any other would produce the same error, though). Projekktor fails in that case with an error message in line 2680 (function _getTypeFromFileExtension).
The problem is that the regex in the try/catch block before this line ALWAYS fails (at least in my case). The regex never returns a proper result because the function parameter url is not a string but an array. This then always sets fileExt='NaN' in the catch block. This file extension is not part of the extTypes array and so an error is thrown.
I just found out that the file extension "NaN" exists if you don't limit the platforms and therefore this error does not popup though the regex fails here, too.
Can someone confirm this?
where can we find the swf file source? thanks.
Although safari 8.0.5 supports fullscreen feature, it's not woking "well".
When I trigger the fullscreen, the screen gets dark but the video moves up to the right up corner and doesn't get resized whatsoever.
When I hit escape button I exit the (buggy) fullscreen mode to the normal mode.
PS: Fullscreen works fine on both chrome, firefox and IE11
Can you fix that please?
How do I get the player to auto switch to HQ when it goes full screen?
I have an .m4a audio file which plays 'correctly' in chrome if I hard code it into the playlist in the projekktor config. If I use the setFile() function however, it seems to fall back to flash, and doesn't play at all (which is probably a separate issue)
here's a sample debug output:
when hardcoded:
0: "Update: 'state"
1: "http://myserver.local/Asha.m4a"
2: "AUDIO"
3: "PLAYING"
when using setFile()
0: "Update: 'state"
1: "http://myserver.local/Asha.m4a"
2: "AUDIOFLASH"
3: "PLAYING"
(I don't want to make this message painfully long, so if you need more info please let me know)
Hello there
I would like to ask some help on what it must be done to make the share links set properly.
I have followed the link at http://www.projekktor.com/board/index.php?id=22629 and ended like the code below:
shareTIT = "Televisão do Sul - "+$(this).children("img").attr("alt");
shareURL = BASE+"video/"+cp;
playlist = [{
0:{src:VBASE+'ad.mp4', type: 'video/mp4'},
config: {
disablePause: true,
disallowSkip: true
}
},
{
0:{src:VBASE+cp+'.mp4', type: 'video/mp4'},
config : {
plugin_share : {
links: {
'twitter': {
code: '<'+'if'+'rame id="%{embedid}" src="http://twitter.com/share?url='+shareURL+'&text='+shareTIT+'" width="640" height="385" frameborder="0"><'+'/if'+'rame>',
}
}
}
}
}
];
I always end with 'I found a cool HTML5 video player. Check this out: http://www.projekktor.com via @projekktor' when sharing with twitter
Thank you in advance.
Best regards
Pedro
During grunt build the new plugin subroutine is broken. It finds no directories, even when they exist.
I'm exploring, will do a PR when I have something.
Hello projekktor users and developers!
Long time no see...
Maybe it's already too late, but if anyone is still interested in using or developing projekktor please take a look at the current develop branch of it in my own projekktor fork:
https://github.com/fixedmachine/projekktor
I was trying to contact @frankyghost for his opinion about the future of this project but unfortunately I still have no answer :( I don't know what happened exactly that he left this project but I hope he's doing fine and I wish him all the best. I'm really thankful for his great vision of this video player and fantastic execution of this vision in the product which is still used on many sites.
I think that projekktor still has its place in the video players landscape and in my current development version is a really useful library - even in today's 'no plugin' world. It's got features which make it unique and I've added many new ones, like:
I hope it's not the last breath of this project before it dies of abandonment. Of course I'm sure that the coding style (or lack of it) in which it was written is old and unmaintainable in the long run. There are still hidden hacks in the code to make it work for stone-age browsers or devices. There is a need to rewrite it in modern fashion from scratch or at least make a general refactoring to give projekktor a new life.
It's on GPL licence so all my work is legal and valid even without @frankyghost acceptance. Anyway I can't give anyone guarantee that it's working perfectly. For sure my changes are breaking compatibility with the last official projekktor and I've dropped support for anything below IE11.
All the development I've made was without @frankyghost revision or supervision, because I haven't had any contact with him since September 2014. I've got a collaborator access to the official projekktor repo on GitHub, but I don't feel it's fair to push or mess with it in any way without @frankyghost acceptance. For that reason I'm pushing new changes only to my forked repo. If @frankyghost contacts me and agrees to further develop this project together maybe we'll merge my changes with the official repo. I don't know. I hope it'll happen but that's all I've got for now.
I'll be happy to hear any feedback from you. Feel free to share your thoughts and have fun with the new version of projekktor.
Cheers!
Radosław Włodkowski
There is an issue with currently used HLS OSMF plugin:
denivip/osmf-hls-plugin#47
which making it useless in most situations.
Switching to https://github.com/mangui/HLSprovider (which is working flawless) should fix that issue.
The original issue I had was the following:
If I'm having a video element with a id containing a hyphen AND limiting projekktor to flash the loading spinner won't disappear after the video started:
<video id="vid-1" width="560" height="315" controls>
<source src="test.mp4" type="video/mp4">
</video>
and providing ['browser','flash'] as platform limitation.
If I remove the hyphen, it works.
Basically projekktor fails on different lines if the id contains unusual characters. The HTML5 definition does not limit the characters for an id anymore (see http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-id-attribute), so you could use whatever the charset offers.
So if some provides a - according to the specs - valid id like <p id="video♥"> <p id="video[test]"> it breaks projekktor, too.
I did not look into this any further but I guess it's because of auto-generating variable names out of the provided id and everything that's not a valid character for a JavaScript variable may cause problems here.
Which of the 4 StrobeMediaPlayback.swf files do I need to include? I want to add this to my page where users can upload content.
Of do yI need all 4 and the StrobeMediaPlayback.swf does load the other ones when needed?
Thanks, Michael
would be nice to have an error message that tells the user ether to update the browser or to install flash (like in the good old days) instead of:
Sorry, your browser does not support the media format of the requested file.
When using JQuery 1.10.x the volume slider can only be dragged, not clicked. Also the video timeline can no more be clicked. Here is an example page:
http://www.kaltenbach.com/en/powerful-solutions/media/videos/virtual-plants/
Could be my customer would pay for fixing this issue.
While using this library in Firefox for Ubuntu I noticed that filetype auto-detection by video url breaks because the Totem Player Firefox plugin (named VLC Multimedia Plugin (compatible Totem 3.0.1)), specifies one or more mimetypes with a blank suffix (aka file extension). This leads to an incorrect typeModel being loaded which ends with error number 11 Invalid streamType and/or streamServer settings for null.
One question I have is why is _getTypeFromFileExtension() ran if we already have the type? Up until the _getTypeFromFileExtension() function is ran, the file object has both a src (String) and a type (String) property. Why is this type ignored in favor of what _getTypeFromFileExtension() returns, and why is the returned type added to src by making it an object? What is the use of data.file.type if data.file.src.type is used for finding the correct typesModel? (for reference, the code block I'm talking about is located here)
I am using Kweb3 with projekktor on raspberry pi. The time i play 5-6 files, it keeps on increasing virt memory & hence the time it reaches 500mb, browser start showing loader & nothing happens (basically goes out of memory/memory leak is happening). How can this memory issue be fixed? it is not removing the older video from memory.
Hi i would like to know if theres any doc or example file or how this player should be configured to play a stream hls
Projekktor.controllbar stores changed values in cookie, disabled cookie (i.e. cookieExpiry=0) stops some controlbar functions to work properly (i.e mute/unmute => volume always 0.5 after first mute).
It would be very useful in learning videos to only allow skip functionality backwards and not forward. There could be then three states of disallowSkip:
{ forward : true, backward : false }After commit 104ec4c VOD streams like HLS and RTMP with fixed duration can't be seeked (allowRandomSeek=false). That's true on OSMF flash model, but on iPad I've got problems too (using projekktor interface, not the native one)
Links are dead:
http://www.projekktor.com/docs.php
http://www.projekktor.com/compatibility.php
http://www.projekktor.com/demo.php
The project is still there?
Short description:
When user want to change position of current song then he clicks new position on progress bar. Sometimes position isn't changed by player, especially after few track skips or in radio mode.
Technical information
Position of current song is changed by projekktor's function setSeek(position) = setPlayhead(position) and later by 'mediaElement.seek(newpos);'.
Unfortunately sometimes it doesn't work. Position isn't changed by flash player and funciton OSMF_seekingChange isn't fired.
This issue occured in projekktor version: 1.3.09
Projekktor does not work with the Internet Explorer 11 on Windows 10. Even the most demos are not working on the projekktor website. Are there any solutions for it?
The website says this project is licensed under GPL, but I don't see this file in the repository any more. Where is it?
Hi, I try to play an Youtube video but result is next,
#11 Invalid streamType and/or streamServer settings for Projekktor - RTMP support.
How I can solve this problem.
on http://www.projekktor.com/demos/javascript/
is the same problem.
Help me please.
Thanks
in xhtml the video always loop (even if I set parameter loop: false).
Actual behaviour:
Very often projekktor loader is still visible when song is playing.
When this problems occurs, player doesn't play the next song. No reaction when song is finished
Hi Sascha,
i would be great if you can provide the projekktor player via bower (http://bower.io/#registering-packages)
Thanks,
Thomas
Upon inspection, I noticed that there was a leaked for loop i variable. Found in the method: toSeconds
the video seems to be ignored while resizing, in my setup.
i have:
CSS
html, body {
height:100%;
margin:0; padding:0;
background:#000;
overflow:hidden;
}
JS
var p = projekktor('video', {
ignoreAttributes:true,
//*
width:$(window).width(),
height:$(window ).height(),
//
controls:true,
autoplay:false,
volume: 0.7,
/* path to the MP4 Flash-player fallback component */
playerFlashMP4:'http://mydomain.com/projekktor/jarisplayer.swf'
});
//*
$( window ).resize(function() {
var w = $(window ).width();
var h = $(window ).height();
p.setSize( { width: w, height: h } );
});
the gui is resized correctly, but the video is not.
Hi,
this is just a question, I can't find the solution anywhere.
I want to implement projekktor as a radio player. So I need to not have a pause button but a stop button instead. And I need the play button to reload the stream instead of just continuing from where it left. Is this supported?
Thanks
projekktor.com links to malware.
I got spammed with adds and got malware alerts on the site.
At the very least the website appears to be dead, at worst its linking to malware.
See:
applyImage: function (url, destObj) {
var imageObj = $('<img/>').hide(),
currentImageObj = this.pp.getDC().find("." + this.pp.getMediaId() + "_image"); // select by class to workaround timing issues causing multiple <img> of the same ID being present in the DOM
ref = this; //<!-- this one ...
Actual behaviour:
Now we cannot listen any music in player.
Expected behaviour:
Playing the songs should be possible.
Opera doesn't support playing mp3 so projekktor uses internal flash player to do this.
This flash player with name 'StrobeMediaPlayback.swf' cannot start playing full songs (for logged user) for example:
http://placebo102.staging-placebo.mondiamedia.com/api/fetch/stream/ipercast/7cb4a767-9af4-8b7a-3efb-490d7539c337.m4a
but can play preview song streams like:
http://staging-placebo.mondiamedia.com/api/fetch/preview/23137471
While investigating why we couldn't remove cue points from a player instance.
When cue point tries to add listeners, then tried to remove them, the removeListeners is unable to remove the event listener for that cue point.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.