sampotts / plyr Goto Github PK
View Code? Open in Web Editor NEWA simple HTML5, YouTube and Vimeo player
Home Page: https://plyr.io
License: MIT License
A simple HTML5, YouTube and Vimeo player
Home Page: https://plyr.io
License: MIT License
Hi.
I would love to see adaptive streaming support for VOD and Live.
Read about it here: http://www.wowza.com/forums/content.php?546
I have to create sites that are 508 compliant because I work on US government projects. They often insist that sites must be accessible on as many platforms as possible. This is especially true because government computers are often out of date (as far as browsers go anyway). I have been reviewing this media player on various internet explorer versions, I have noticed some issues.
Are their any plans to solve these issues? If so, then I would really like to implement this player into various websites and maybe work on a Drupal module.
I was going to start working on this project a bit, but the first thing that came to mind was setting up an environment to work on. I don't even have a web server installed on my local machine, I use VMs for everything. I was going to build out a quick Docker or Vagrant for this project. Do you have a preference on which one? Is this overkill on a purely client side project?
I'm planning to use Plyr in an AJAX environment where pages are dynamically loaded. Currently there's no convenient way to destroy a Plyr instance to prevent memory leaks.
Is it possible to add a .destroy()
method where all events are unbind, all markup removed, everything restored to the initial state.
Thanks!
The player's controls are made with button elements. A keyboard user can hit enter to activate them.
Mute and captions are toggles made with input type="checkbox". A checkbox can only be used with the spacebar by default. Not with enter. Mute and captions don't look like checkboxes. They look like buttons. A keyboard user might think that mute and captions don't work because they don't react to the enter-key while the other controls do. Please add support for enter on the checkboxes to solve this. That's keycode 13 in JavaScript if I'm not mistaken.
Could all the SVG be concocted & minified as 1 file ("sheet")? Fewer HTTP requests, better for compression, etc
Safari, OSX Yosemite 10.10.2
The example on plyr.io doesn't play smoothly, when clicking on the fast-forward, it skips in time back and forward the complete rest of the video
Hello,
I'm not able to make plyr go fullscreen on firefox 35 (even on the demo page). The web debugging console doesn't show any error. I've tested it on a firefox with a totally new clean profile so extensions can't get in the way.
Cheers,
Great player guys!
Since I work with browser video, having tried most of the players around, one thing that is consistently missing is support for native playlist.
Let's make an example: I split a 60 minutes long video in 6 videos of 10 minutes, to reduce load on server AND client. I want to automatically play one video after the other, without the user noticing that they are multiple videos.
Now the de facto solution is to use html5 media events, but if you want it to be seamless you have to use some html/css hacks. And it is fugly.
If you could solve this natively (and naively ๐ : ), I'm sure it would boost your popularity.
Thank you for the simple but cool jobs ~
And it would be great if font-awesome icons are optional for the controls icons.
http://fontawesome.io/icons/#video-player
Is there any way we can use youtube videos instead of html5 videos?
Thanks.
I notice there are some control for the player using keyboard, like space bar and the enter can be used to control play/pause.
Is it possible to add other control and/or custom control for it?
E.g. Right arrow = fast forward, left arrow = rewind, up arrow = volume up, down arrow = volume down?
For debug purpose I think will better add in bower the non-minified files.
Would be awesome to hide the controls in fullscreen if mouse wasn't moved a certain time and re-show them on mouse move.
new feature
Any bootstrap version ?
Currently, the controls highlights based on :focus
, but this is an issue as the element does not leave the focus
state unless you focus another element on both phones and desktops.
We could work around this issue by replacing :focus
with :active
- however, this brings forth another issue for keyboard users as the element does not enter the active
state, only the focus
state when you use TAB
to select elements.
It is a small issue, but mildly irritating - especially when there's a "popover" showing up and not going away until you focus another element.
It'd be nice if something like player.source('some new url')
could be called to stop and remove whatever is currently playing, then replace it with a new source without re-instantiating the player. Fullscreen would be preserved if it was turned on, as would audio levels.
It would be great to have playlist functionality. If I get a chance, I will dig in and see if I can PR a working version.
Plyr.io looks awesome! Great work!
When we encode our videos we generate a VTT file and include thumbnails in it.
We are currently using JWPlayer and it's format we follow is below:
WEBVTT
00:00.000 --> 00:05.000
/assets/preview1.jpg
00:05.000 --> 00:10.000
/assets/preview2.jpg
00:10.000 --> 00:15.000
/assets/preview3.jpg
00:15.000 --> 00:20.000
/assets/preview4.jpg
Raised by a few people on hacker news
Thank you for the awesome work๏ผis there a fullscreen api i can use ?
I really like this player, what you think add support for sass? Will be nicer for developers like me who loves SASS. ๐
Tried to display captions successfully with captions:{defaultActive:!0}
. Unfortunately in FF 37 the div player-caption stays empty. Firebug reports 'Caption track found' and 'Successfully loaded the caption file via AJAX' as well as 'TextTracks not supported so rendering captions manually'. Am I doing something wrong or are there known issues with FF?
Thanks
Used on the mobile phone, audio and video can only be played simultaneously, and when appears in the video, if you are playing audio, then video, video animation does not change the
When seeking or playing media and it passes the 60 min mark it lapses back to 0
In chrome when right-clicking on the video you can use the native html5 player controls to pause, mute. This is a good ting, but plyr does not reflect the changes.
If you pause the player via native plyr will still show the video as playing (Pause icon). When you click the plyr pause icon the video remains paused, and you have to click one more time to trigger playback again.
Observed in Chrome and Firefox on OSX.
I can not find the dir "//cdn.plyr.io/1.0.19" needed in file "docs/index.html".
First of all, thanks for all the hard work you put in this project!
Here is the problem:
One way to center a div of unknown height/width is to use position:absolute;
with transform: translate(-50%, -50%);
Better described here: https://css-tricks.com/centering-percentage-widthheight-elements/
Say you have a modal, which is centered using this method, and you put a plyr-enhanced video inside.
Due to the fact that you use a simplified way of calculating progress bar offset (related to mouse click point), when seeking (click on a progress bar), a video starts playing at a wrong time - it simply doesn't respect transform: translate(-50%, -50%);
PR may follow, but I usually use jQuery these days, and I don't want to contribute barely working code to your repo.
If strict mode 'disabled':
Uncaught TypeError: events.split is not a function
On chrome for android, lollipop, I tap play, but the black media background lingers. We should add a loading animation to communicate with the user that the media is downloading.
player doesnt work without the javascript docs.js, anyway around this?
Hi,
This player is beautiful :). May be you can add the compatibility with bootstrap ? Actually, if I import the bootstrapp css, area of volumne is not displayed correctly.
Some example :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Plyr with bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/plyr/plyr.css" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="player">
<video poster="//cdn.sampotts.me/plyr/poster.jpg" controls>
<!-- Video files -->
<source src="//cdn.sampotts.me/plyr/movie.mp4" type="video/mp4">
<source src="//cdn.sampotts.me/plyr/movie.webm" type="video/webm">
<!-- Text track file -->
<track kind="captions" label="English captions" src="//cdn.sampotts.me/plyr/movie_captions_en.vtt" srclang="en" default>
<!-- Fallback for browsers that don't support the <video> element -->
<div>
<a href="//cdn.sampotts.me/plyr/movie.mp4">
<img src="//cdn.sampotts.me/plyr/poster.jpg" alt="Download">
</a>
</div>
</video>
</div>
</div>
</div>
</div>
<script src="js/plyr/plyr.js"></script>
<script src="js/plyr/docs.js"></script>
<script>(function(d,p){var a=new XMLHttpRequest(),b=d.body;a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"sprite.svg");</script>
</script>
</body>
</html>
Hey, nice video player :)
I think stopping the video while seeking in it would be a good thing to have. Having the seconds displaying where the seek will be when released would be a goo thing too.
For example I'm at 0:16 I start seeking and want to go to 0:30. When my cursor is on 0:30 while seeking the counter should show "0:30"
Another one from hacker news. An option to render the sr-only labels as tooltips instead.
Hi Plyer,
I think after the video is finished the player should bring back the poster image.
Right now I just see the last frame of the video. (In your example it's just an empty white screen.)
Warm regards,
Jack
What are the difference between the 2 please?
Here is what I have so far:
as title
Wondering why eBay appears in license text.
Can the option to handle net::ERR_CONNECTION_REFUSED
be added
Raised on hacker news:
https://news.ycombinator.com/item?id=9139633
Could I use this html5 player to play a local video by selecting in file system?
Hi,
I like the player a lot specially the smooth responsive part! One thing, I see that the seekbar is set on mouse up and would like it to be draggable, this is important for mobile/cordova as well.
Can it be easily done or not?
Thank you!
Regards,
Riaan
I've been looking for something like this, but I cannot get it to work the way it's described.
First. The script will auto-run without any initialization, not by using the plyr.setup method.
The following will not disable the script as the docs tell me. It ignores all options I pass to it.
plyr.setup({
enabled: false
});
It seems like one has to write their own controls to get this working at all. Some sane defaults should be provided.
Not sure if this is an enhancement or a bug. Assuming the latter. Safari 8.0.3, OS X 10.10.2.
Keep up the good work!
I know that it can be easily added by using
var player = document.querySelectorAll(".player")[0].plyr;
player.media.addEventListener('ended', function() {
player.play();
});
but a shortcut as part of the configuration would be handy?
Youtube/Vimeo/Dailymotion support :)
At this moment the subtitle link is lost:
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 is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
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.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.