sampotts / plyr Goto Github PK

View Code? Open in Web Editor NEW

25.4K 429.0 2.9K 64.67 MB

A simple HTML5, YouTube and Vimeo player

Home Page: https://plyr.io

License: MIT License

JavaScript 83.74% SCSS 16.26%

html5-video youtube vimeo javascript plyr

plyr's People

Contributors

Stargazers

Watchers

Forkers

yashilanka hlynn93 bhaveshsgupta cbeel caerlie smashou lightpix dhad 4shub fadupla spaceshipone pingia zongkelong voilet zhujian198 truexu0529 anbangzhiguo thinkeruser jkso chaodluffy byeblogs wheelcomplex dream-seeker techslides bu7ch tkggusraqk lingyun0406 rahulsimpact cethap tazzkiller rasata akdesign brezipe apendrag0n3 trfiladelfo prodigeni yomigits zawsx zjdgx iamsahmad vashrei empatisoft ibrahim87 jqueryalmeida bluebaytravel frenzyjay hernan604 pborreli midrissi qbektrix manjunathbv arianra laserpirate shwzo shilezi dragon-lex sdmels horrigan97 menxu lemonhall ezhangle dahal lisy13 apps4coder hcxiong momin-riyadh ydream gustaflindqvist koburakuda hbehkamal kublaj ui-frontend nguyenlamzx collinlee tombyrer one-aalam alihalabyah rwojnillowicz khkl89 neworldwebsites yllus vivek-pr julesbravo ronniebai5044 iarnaud thehiddenhaku drooids edwinyzh sharathshivamurthy1 jarvizx mrmagaw fclaussen yashin-luo sekouperry aerophile sahfu ikalin greyzero trungnghia112 djmarcos88

plyr's Issues

Add loop support

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?

Better icons for captions and restart playback

Raised by a few people on hacker news

Seeking in the video

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"

requires docs.js

player doesnt work without the javascript docs.js, anyway around this?

App control

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

Add option to hide controls in fullscreen

Would be awesome to hide the controls in fullscreen if mouse wasn't moved a certain time and re-show them on mouse move.

Play YouTube and Vimeo

Is there any way we can use youtube videos instead of html5 videos?

Thanks.

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.

IE9 (wind7) - There are no captions, but the video plays
IE10 (wind8) - There is a captions option, but it does not seem to work. I cannot get the captions to appear.

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.

SASS Support

I really like this player, what you think add support for sass? Will be nicer for developers like me who loves SASS. 👍

Fix display with bootstrap

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>

Improve playback progress

Raised on hacker news:
https://news.ycombinator.com/item?id=9139633

Playback speed controls

new feature

API For Changing Sources

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.

WebVTT files to load Tooltip Thumbnails

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

Video doesn't play smoothly

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

Playlists (Audio & Video)

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.

plyr vs video.js

What are the difference between the 2 please?

Here is what I have so far:

plyr is much smaller
video.js has wider compatibility
video.js has larger ecosystem (plugins, skins) since it has been around longer
video.js is supported by a large video company
video.js has variable playback rate (which I am most concerned about for a possible project)

Add loading animation

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.

Plyr does not react to "native" events

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.

is there a fullscreen api i can use ?

Thank you for the awesome work，is there a fullscreen api i can use ?

time higher 60 minutes starts at 0 min

When seeking or playing media and it passes the 60 min mark it lapses back to 0

Destroy Method

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!

Request: Youtube/Vimeo/Dailymotion support

Youtube/Vimeo/Dailymotion support :)

JavaScript Strict mode

If strict mode 'disabled':

Uncaught TypeError: events.split is not a function

See Tampermonkey/tampermonkey#213

Some errors with the documentation?

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
});

Keyboard control of playback

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?

The poster image should appear after the video is finished.

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

Lost subtitle

At this moment the subtitle link is lost:

http://cdn.selz.com/plyr/1.0/movie_captions_en.vtt

Adaptive streaming options.

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

Sprite sheet?

Could all the SVG be concocted & minified as 1 file ("sheet")? Fewer HTTP requests, better for compression, etc

Audio playlist

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.

how to use this player

I can not find the dir "//cdn.plyr.io/1.0.19" needed in file "docs/index.html".

Minified CSS and JS

For debug purpose I think will better add in bower the non-minified files.

use Font Awesome Icons instead of SVG

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

Why is it not responsive ?

Any bootstrap version ?

Docker or Vagrant?

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?

Captions not working in Firefox

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

Option for tooltips for buttons

Another one from hacker news. An option to render the sr-only labels as tooltips instead.

could i put an advertisement video before main video ?

as title

Dragging the volume control does not change the volume until released

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!

Seek on drag

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

Fullscreen doesn't work on firefox 35

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,

API should allow to set track (subtitle file)

:active vs :focus pseudo-classes for controls

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.

eBay in license

Wondering why eBay appears in license text.

handle net::ERR_CONNECTION_REFUSED

Can the option to handle net::ERR_CONNECTION_REFUSED be added

Seeking doesn't work correctly when container positioned with negative translate2d

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.

keyboard accessibility

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.

Play local video

Could I use this html5 player to play a local video by selecting in file system?

Controls Defaults

It seems like one has to write their own controls to get this working at all. Some sane defaults should be provided.

sampotts / plyr Goto Github PK

plyr's People

Contributors

Stargazers

Watchers

Forkers

plyr's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs