angular.module('plunker', []);
angular.module('plunker').directive('vidplayer', function ($timeout, $log) {
function isHlsSourcAbsent(playlist) {
var hls = false;
var count = 0;
angular.forEach(playlist, function (row, index) {
angular.forEach(row.sources, function(element, index){
var isMp3u8 = element.file.indexOf('.m3u8');
if (isMp3u8>0) {
count++;
}
});
});
if (count>0)
return false;
else
return true;
}
function convetToBcPlaylist() {
var newPlaylist=[];
return [
{
name: 'item1',
description: 'item1 description',
sources: [{
src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',
type: 'video/mp4'
}],
poster: 'https://media.w3.org/2010/05/sintel/poster.png',
thumbnail: 'https://media.w3.org/2010/05/sintel/poster.png'
},
{
name: 'item2',
description: 'item2 description',
sources: [{
src: 'https://media.w3.org/2010/05/bunny/trailer.mp4',
type: 'video/mp4'
}],
poster: 'https://media.w3.org/2010/05/bunny/poster.png',
thumbnail: 'https://media.w3.org/2010/05/bunny/poster.png'
},
{
name: 'item3',
description: 'item3 description',
sources: [{
src: 'https://vjs.zencdn.net/v/oceans.mp4',
type: 'video/mp4'
}],
poster: 'https://media.w3.org/2010/05/sintel/poster.png',
thumbnail: 'https://media.w3.org/2010/05/sintel/poster.png'
},
{
name: 'item4',
description: 'item4 description',
sources: [{
src: 'https://media.w3.org/2010/05/video/movie_300.mp4',
type: 'video/mp4'
}],
poster: 'https://media.w3.org/2010/05/bunny/poster.png',
thumbnail: 'https://media.w3.org/2010/05/bunny/poster.png'
}
];
}
return {
restrict: 'EC',
scope: {
id: '@',
canDownloadProxy: '@',
index: '<'
},
template: function (scope, element, attrs) {
return '\
<div style="display: block; position: relative;"> \
<div style="padding-top: {{paddingTop}};"> \
<video id="{{pid}}" \
data-account="5021452992001" \
data-player="Hy869nKpg" \
data-embed="default" \
data-application-id \
class="video-js" \
controls \
style="width: 100%; height: 100%; position: absolute; top: 0px; bottom: 0px; right: 0px; left: 0px;"> \
</video> \
</div> \
</div> \
<ul class="vjs-playlist">\
</ul>\
</div>';
},
//ng-if="playlist.length>1"
link: function (scope, element, attrs) {
function onPlayPause(name, params) {
/* based on event(play or pause), Now Playing/Now Paused should be displayed, hence load css to show that*/
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('media', 'all');
if (name =='onPause'){
link.setAttribute('href', 'stylenew.css');
}
else
{
link.setAttribute('href', 'style.css');
/*if (!myPlayer.paused()){
var index = myPlayer.playlist.currentItem();
var thumbnail = document.getElementsByTagName('picture')[index];
thumbnail.classList.remove('vjs-icon-play');
}*/
}
head.appendChild(link);
}
function onPlayOnSelect() {
console.log("click event");
var myPlayer = this;
myPlayer.play();
}
var pid = "bcplayer-" + attrs.id;
scope.pid = pid;
scope.paddingTop = (false) ? "75%" : "56.25%";
scope.index = 0;
// the templated element is only available after render
// http://stackoverflow.com/questions/11125078/is-there-a-post-render-callback-for-angular-js-directive
$timeout(function () {
bc(document.getElementById(pid), {
//fluid: true
plugins: {
}
});
videojs(pid).ready(function () {
var firstclick = true;
var firstclick_index = 0;
var myPlayer = this;
var bcplaylist = convetToBcPlaylist();
myPlayer.playlist(bcplaylist);
onPlayPause('onPause', this);
var counter = 0;
var onPlay = angular.bind(this, onPlayPause, 'onPlay');
var onPause = angular.bind(this, onPlayPause, 'onPause');
scope.$on('$destroy', function () {
videojs(pid).dispose();
videojs.off('play', onPlay);
});
myPlayer.on('play', onPlay);
myPlayer.on('pause', onPause);
function removePlayIcon(){
var index = myPlayer.playlist.currentItem();
var thumbnail = document.getElementsByTagName('picture')[index];
if (myPlayer.paused()){
thumbnail.classList.add('vjs-icon-play');
thumbnail.classList.remove('vjs-icon-pause');
}else{
thumbnail.classList.remove('vjs-icon-play');
thumbnail.classList.add('vjs-icon-pause');
}
//thumbnail.classList.add('vjs-playlist-now-playing');
}
function playOnClick(){
var index = myPlayer.playlist.currentItem();
var thumbnail = document.getElementsByTagName('picture')[index];
if (firstclick || firstclick_index != index){
myPlayer.play();
thumbnail.classList.remove('vjs-icon-play');
thumbnail.classList.add('vjs-icon-pause');
thumbnail.classList.add('vjs-playlist-now-playing');
console.log("firstclick "+firstclick);
firstclick = false;
firstclick_index = index;
}else{
if (myPlayer.paused()){
myPlayer.play();
thumbnail.classList.remove('vjs-icon-pause');
thumbnail.classList.add('vjs-icon-play');
thumbnail.classList.add('vjs-playlist-now-playing');
}else{
myPlayer.pause();
thumbnail.classList.remove('vjs-icon-pause');
thumbnail.classList.add('vjs-icon-play');
thumbnail.classList.add('vjs-playlist-now-playing');
}
}
}
var vjsitem = document.getElementsByClassName('vjs-playlist')[0];
vjsitem.addEventListener('mouseover', removePlayIcon, false);
vjsitem.addEventListener('focus', removePlayIcon, false);
vjsitem.addEventListener('click', playOnClick, false);
vjsitem.addEventListener('tap', playOnClick, false);
});
});
}
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script data-require="angular.js@1.5.11" data-semver="1.5.11" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
<script src='https://players.brightcove.net/5021452992001/Hy869nKpg_default/index.js'></script>
<link rel="stylesheet" href="style.css" />
<script>document.write("<base href=\"" + document.location + "\" />");</script>
<script src="app.js"></script>
</head>
<body>
<section>
<vidplayer id="preview-player" can-download-proxy="true"></vidplayer>
</section>
</body>
</html>
.vjs-playlist-now-playing:before
{content:'Now Playing';top:0;left:0}
.vjs-playlist-now-playing:before
{content:'Now Paused';top:0;left:0}
.vjs-icon-play:before {
content: '';
}