/
MediaPlayer.tpl.php
149 lines (129 loc) · 7.54 KB
/
MediaPlayer.tpl.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<?php
if ($context->isVideo()) {
echo $savvy->render($context, 'MediaPlayer/Video.tpl.php');
} else {
echo $savvy->render($context, 'MediaPlayer/Audio.tpl.php');
}
?>
<script type="text/javascript">
(function () {
var e = function () {
<?php if (isset($context->id) && $context->id) { ?>
WDN.setPluginParam('mediaelement_wdn', 'options', {
success: function (m, v) {
//Playcount
var w = false, u = '<?php echo $controller->getURL($context) ?>';
m.addEventListener('play', function () {
if (!w) {
WDN.jQuery.post(u, {action: "playcount"});
w = true;
}
});
//Social Sharing via https://xparkmedia.com/blog/mediaelements-add-a-share-button-to-video-elements-using-jquery/
var initSharing = function(m, v) {
var $ = WDN.jQuery;
var $inner = false;
var $video = $(v);
var $title = $video.attr('title');
var share_url = $video.attr('data-url');
var media_type = v.tagName.charAt(0).toUpperCase() + v.tagName.slice(1).toLowerCase();
if (!share_url) {
return;
}
if ($inner = $(v).parents('.mejs-container')) {
// share urls
var sharelinks = {
tw: {title: 'Twitter', url:'http://twitter.com/share?text=' + media_type + ': ' + $title + '&url=' + share_url}, // twitter
fb: {title: 'Facebook', url:'https://www.facebook.com/sharer/sharer.php?u=' + share_url}, // facebook
gp: {title: 'Google Plus', url:'https://plus.google.com/share?url=' + share_url}, //google plus
em: {title: 'Email', url:'mailto:?body=Checkout this ' + media_type + ': ' + share_url + '&subject=' + media_type + ' : ' + $title}
}
//create share links
var links = '';
for (var key in sharelinks) {
links += '<a href="#" rel="nofollow" class="'+key+'" title="Share on '+sharelinks[key].title+'"></a>';
}
var html = '<div class="media-content-head">';
html += '<div class="media-content-title">' + $title + '</div>';
html += '<a href="#" rel="nofollow" class="share-video-link">' + 'Share' + '</a>';
html += '<div class="share-video-form">';
html += '<em class="share-video-close">x</em>';
html += '<h4>' + 'share this video' + '</h4>';
html += '<label for="share-video-lnk-<?php echo $context->id?>"><em>'+ 'link' +'</em></label>';
html += '<input type="text" id= "share-video-lnk-<?php echo $context->id?>" class="share-video-lnk share-data" value="' + share_url + '" />' ;
html += '<div class="video-social-share">' + links + '</div>' ;
html += '</div>';
html += '</div>';
$inner.prepend(html);
// start listeners
var $sharelink = $inner.find('.share-video-link');
var $sharefrom = $inner.find('.share-video-form');
var $closelink = $inner.find('.share-video-close');
var $videotitle = $inner.find('.media-content-title');
var $videohead = $inner.find('.media-content-head');
// hide form when video is playing
m.addEventListener('play', function(e) {
//$sharelink.hide(); $videotitle.hide();
$videohead.hide();
$sharefrom.hide();
}, false );
// show form when video is paused
m.addEventListener('pause', function(e) {
$sharelink.removeClass('video-active');
$inner.find('.mejs-overlay-button').show();
$videohead.show();
}, false );
// close video form
var video_close_share_form = function($inner, $form) {
$form.hide();
$form.removeClass('video-active');
$inner.find('.mejs-overlay-play')
.removeClass('share-overlay');
};
var video_open_share_form = function($inner, $form) {
$form.show();
$(this).addClass('video-active');
$inner.find('.mejs-overlay-play')
.addClass('share-overlay').show();
}
var toggle_share_form = function($inner) {
var $form = $inner.find('.share-video-form');
if($form.is(':hidden')) {
video_open_share_form($inner, $form);
} else {
video_close_share_form($inner, $form);
}
}
// show / hide video form
$closelink.bind('click', function(e) {
e.preventDefault();
var $inner = $(this).parents('.mejs-container');
var $form = $inner.find('.share-video-form');
video_close_share_form($inner, $form);
});
$sharelink.bind('click', function(e){
e.preventDefault();
toggle_share_form($(this).parents('.mejs-container'));
});
// add share links listener
$inner.find('.video-social-share a').click(function(e){
e.preventDefault();
key = $(this).attr('class');
if(sharelinks[key]) {
window.open(sharelinks[key].url);
}
});
}
}
//Load the CSS
WDN.loadCSS('<?php echo UNL_MediaHub_Controller::$url; ?>templates/html/css/share.css', function() {
initSharing(m, v);
});
}
});
<?php } ?>
WDN.initializePlugin('mediaelement_wdn');
};
e();
})();
</script>