README
¶
GopherVideo
A video player written with GopherJS.
Table of Contents
- Prerequisites
- Installation and Usage
- Features
- Controls
- Frequently Asked Questions
- License
- Acknowledgments
Prerequisites
The only prerequisite is Go.
All other dependencies will be pulled with go get
Installation and Usage
-
Install or update
go get -u github.com/csos95/gophervideo -
Write a GopherJS project that uses GopherVideo
Simple example that adds a video to the page:package main import ( "github.com/csos95/gophervideo" "honnef.co/go/js/dom" ) func main() { // get the document and body elements document := dom.GetWindow().Document() body := document.DocumentElement().GetElementsByTagName("body")[0].(*dom.HTMLBodyElement) // append a new gopherVideo player to the body player := gophervideo.NewPlayer(body, "http://example.com/video.mp4") } -
Run
gopherjs build -m -o myscript.jsto compile a minified version -
Use the script in a html file
<script type="text/javascript" src="myscript.js"></script>
Features List
| Feature | Status | Notes |
|---|---|---|
| play/pause | done | |
| fullscreen | done | |
| time/duration text | working, not fully decorated | right now the current time texts shifts as it gets farther in the video |
| progress bar | done | |
| volume bar | working, not fully decorated | the volume icon changes based on the volume. The bar itself is undecorated |
| show controls on hover | done | |
| keybinds | done | see Controls |
| title bar | not started | |
| close button | not started | will be optional |
| settings cog | not started | for overflow settings |
| playback speed | not started | |
| buffering animation | not started | |
| show buffered data on progress bar | not started | will do when decorating the progress bar |
| resize elements as needed | done | right now the progress bar is the only thing that needs to be resized |
| show time on hover over progress bar | not started | |
| click on video to play/pause | done | |
| double click on video to enter/exit fullscreen | done | |
| hide controls when mouse is over video, but not moving | not started |
Controls
| Key | Action |
|---|---|
| space | play/pause |
| f | enter/exit fullscreen |
| k | play/pause |
| j | go backward 10 seconds |
| l | go forward 10 seconds |
Frequently Asked Questions
Why should I use this?
You probably shouldn't. This project is not very mature and was started so that I could work with GopherJS in a project.
The Javascript file is massive!
GopherJS compiles the Go runtime and all dependencies into pure Javascript.
Because of this, the output files can get pretty big.
If you use the -m flag on the GopherJS compiler and gzip the output, it helps a lot.
License
This project is licensed under the MIT License - see the LICENSE file for details
Acknowledgments
SVG icons for controls provided by Open Iconic
Documentation
¶
Index ¶
Constants ¶
This section is empty.
Variables ¶
This section is empty.
Functions ¶
This section is empty.
Types ¶
type Player ¶
type Player struct {
// player data
ID string
URL string
Duration int
ProgressBarWidth int
TimeTextWidth int
Fullscreen bool
FirstPlay bool
Removed bool
Seeking bool
MouseInContainer bool
MouseMoved bool
SecondsSinceMove int
// player elements
Parent dom.HTMLElement
Container *dom.HTMLDivElement
Video *dom.HTMLVideoElement
Controls *dom.HTMLDivElement
PlayPause *dom.BasicHTMLElement
ProgressBarBack *dom.HTMLDivElement
ProgressBarFront *dom.HTMLDivElement
TimeText *dom.HTMLSpanElement
DurationText *dom.HTMLSpanElement
VolumeIcon *dom.BasicHTMLElement
VolumeBar *dom.HTMLInputElement
FullscreenButton *dom.BasicHTMLElement
ProgressBarClickListener func(*js.Object)
ProgressBarDragListener func(*js.Object)
ProgressBarDownListener func(*js.Object)
ProgressBarUpListener func(*js.Object)
// contains filtered or unexported fields
}
Player represents a gopher video player
func NewPlayer ¶
func NewPlayer(parent dom.HTMLElement, url string) *Player
NewPlayer returns a new gopher video player and the contained video
func (*Player) ChangeVolume ¶
ChangeVolume sets the volume 0-100
func (*Player) SeekOffset ¶
SeekOffset seeks by an offset. a positive offset seeks forward, a negative offset seeks backward
func (*Player) ToggleFullscreenState ¶
func (p *Player) ToggleFullscreenState()
ToggleFullscreenState toggles the fullscreen state of the container
func (*Player) TogglePlay ¶
func (p *Player) TogglePlay()
TogglePlay toggles the play state of the video
Source Files
Directories
¶
| Path | Synopsis |
|---|---|
|
examples
|
|
|
ipfs-video
command
A very simple boilerplate webserver to serve a single page.
|
A very simple boilerplate webserver to serve a single page. |
|
ipfs-video/gopherjs
command
|