Flowplayer · Start time

Playback starts at time in seconds given in the URL's fragment identifier.

Right clicking on the player screen will display a custom context menu offering the viewer to copy the link to this page with the video starting at the current playback position.

<head/>

For smoother HLS playback in modern browsers we load the hlsjs plugin.

<!-- Flowplayer library -->
<script src="//releases.flowplayer.org/7.2.1/flowplayer.min.js"></script>
<!-- Flowplayer hlsjs engine (light) -->
<script src="//releases.flowplayer.org/hlsjs/flowplayer.hlsjs.light.min.js"></script>

HTML

For a long video the thumbnails plugin comes in handy to get a visual preview on the timeline:

<!-- Flowplayer thumbnails plugin -->
<script src="//releases.flowplayer.org/thumbnails/flowplayer.thumbnails.min.js"></script>

HTML

<style>

.flowplayer {
background-color: #333;
}
/* splash for devices not allowing autoplay */
.flowplayer.is-splash {
background-image: url(//d12zt1n3pd4xhr.cloudfront.net/img/ccc.jpg);
}
.flowplayer .fp-color {
background-color: #a1e1ff;
}
.flowplayer .fp-color-play {
fill: #a1e1ff;
}
 
/* custom context menu, styling similar to embed code */
.flowplayer .fp-context-menu.fp-menu {
color: #999;
background-color: #333;
width: 34em;
border: 5px solid transparent;
padding: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 0 3px #ccc;
-moz-box-shadow: 0 0 3px #ccc;
box-shadow: 0 0 3px #ccc;
}
.flowplayer .fp-context-menu.fp-menu textarea {
width: 100%;
height: 20px;
font-size: 14px;
color: #ffa500;
background-color: transparent;
margin-top: 1ex;
border: 0;
outline: 0;
white-space: nowrap;
resize: none;
overflow: hidden;
}

CSS

<script>

// ensure that DOM is ready
window.onload = function () {
 
var container = document.getElementById("player"),
 
player = flowplayer(container, {
key: "$775445646737769",
ratio: 3/4,
autoplay: true,
clip: {
title: "Cowboy Canoe Coma",
sources: [
{ type: "application/x-mpegurl",
src: "//d12zt1n3pd4xhr.cloudfront.net/ccc.m3u8" },
{ type: "video/mp4",
src: "//d12zt1n3pd4xhr.cloudfront.net/ccc.mp4" }
]
},
// configure the thumbnails plugin
thumbnails: {
template: "//d12zt1n3pd4xhr.cloudfront.net/ccc/thumbs/{time}.jpg",
height: 50,
interval: 10
},
 
facebook: "https://blacktrash.org/underdogma/ccc.php",
embed: {
iframe: "//d12zt1n3pd4xhr.cloudfront.net/iframe/ccc.html"
},
 
// seek to start time if given once
}).one("ready", function (e, api, video) {
// http://demos.flowplayer.org/api/starttime.html#t={seconds}
var hash = window.location.hash,
pos = hash.substr(3);;
 
if (hash.indexOf("#t=") === 0 && !isNaN(pos)) {
// 1 decimal precision
pos = Math.round(parseFloat(pos) * 10) / 10;
if (pos < video.duration) {
api.seek(pos);
}
}
 
});
 
// use Flowplayer API internal event binding
flowplayer.bean.on(container, "contextmenu", function () {
var textarea = container.querySelector(".fp-context-menu")
.getElementsByTagName("textarea")[0],
pos = player.video.time,
hash = pos && !isNaN(pos) ? "#t=" + (Math.round(pos * 10) / 10) : "";
 
textarea.innerHTML = window.location.origin + window.location.pathname + hash;
textarea.select();
});
 
};

JavaScript

With more than one player on the page or a playlist consider using a query with 2 parameters and location.search to parse and evaluate it. - See also this demo.

The Free player does not allow to customize the context menu, but something similar can be implemented using an overlaying widget with a click handler.

<body/>

<div id="player" class="fp-slim fp-outlined no-buffer">
<!-- custom context menu -->
<div class="fp-context-menu fp-menu">
<label>Copy URL of current playback position:</label>

<textarea></textarea>
</div>
</div>

HTML