Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Implemented videos inside annotation

  • Loading branch information...
commit feb4329c76ed97d96d5e1db9ec24c085bab8451e 1 parent a8faee2
@brianchirls authored
View
19 css/style.css
@@ -393,25 +393,6 @@ body {
height: 100%;
}
-
-/*
-.popcorn-annotation section.image + section {
- margin-left: 268px;
-}
-*/
-
-.popcorn-annotation section.video {
- width: 440px;
-}
-
-.popcorn-annotation section.video + section {
- margin-left: 478px;
-}
-
-.popcorn-annotation video {
- width: 100%;
-}
-
.annotation-handle {
display: none;
position: absolute;
View
14 data/data.json
@@ -67,6 +67,20 @@
},
{
"plugin": "annotation",
+ "start": 10,
+ "title": "Media Left With Video",
+ "headline": "This is a lovely video",
+ "template": "media-left",
+ "text": "Growing demand from surging Asian economies has driven energy prices upward in recent years, finally making it profitable to use hydro-fracking techniques to extract oil and gas from underground shale formations. This means that places once considered off-limits to energy exploration are now \"in play.\" But how will the new industrialization of once-pastoral landscapes from North Dakota to Western New York change the nature of those communities?",
+ "video": [
+ "video/schmitz-landman.webm",
+ "video/schmitz-landman.mp4"
+ ],
+ "poster": "image/schmitz-landman-poster.png",
+ "caption": "The Energy Parade makes its way down main street, Willison on September 18th. The annual street festival and barbecue is paid for by..."
+ },
+ {
+ "plugin": "annotation",
"start": 80,
"end": 90,
"template": "media-left",
View
24 js/popcorn.annotation.js
@@ -42,8 +42,23 @@
}
function getMediaSources(video, sources) {
- var i;
-
+ function getExtension(url) {
+ var ext = url.split('.');
+ if (ext.length > 1) {
+ return ext.pop().toLowerCase();
+ }
+
+ return '';
+ }
+
+ var i, source;
+
+ sources = base.toArray(sources);
+ for (i = 0; i < sources.length; i++) {
+ source = document.createElement('source');
+ source.setAttribute('src', sources[i]);
+ video.appendChild(source);
+ }
}
if (!base.target || !options.title) {
@@ -59,6 +74,8 @@
'.popcorn-annotation.active { display: block; }\n' +
'.popcorn-annotation > .title + div.media-left section.image { float: left; }\n' +
'.popcorn-annotation > .title + div.media-right section.image { float: right; }\n' +
+ '.popcorn-annotation > .title + div.media-left section.video { float: left; }\n' +
+ '.popcorn-annotation > .title + div.media-right section.video { float: right; }\n' +
'.popcorn-annotation > .title + div .clear { clear: both; border: none; }\n' +
'.popcorn-annotation aside { float: right; }' +
'.popcorn-annotation aside > a { display: block; }'
@@ -99,7 +116,8 @@
}
//todo: get multiple sources
- img.src = options.video;
+ getMediaSources(img, options.video);
+ //img.src = options.video;
base.addClass(mediaSection, 'video');
img.addEventListener('loadedmetadata', mediaLoaded, false);
} else if (options.image) {
View
7 js/script.js
@@ -176,6 +176,13 @@
vid = $('video', base.container);
if (vid && vid.length) {
+ //need to wrap video inside another container
+ div = document.createElement('div');
+ vid[0].parentNode.insertBefore(div, vid[0]);
+ div.appendChild(vid[0]);
+ $(div).addClass('video-container');
+
+
player = new VideoPlayer(vid[0]);
vid.bind('play', function() {
video.pause();
Please sign in to comment.
Something went wrong with that request. Please try again.