forked from webmademovies/popcorn-js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
twitterVideo.html
115 lines (102 loc) · 4.21 KB
/
twitterVideo.html
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
<!DOCTYPE html>
<!---
To be able to use the demo effectively, the user must create the following:
1. Two input fields/a method to select data of some sort (drop down list, check box, ect)
for the user to be able to select a video and a hashtag that will be used in the demo
2. A method of some sort (button, listeners, ect) for the user to submit the data that they
entered in the input fields in step 1.
3. Once the above have been added, a listener will listen for a button click on
the submit button, and will call a function to create a popcorn object
and begin running the twitter plugin and begin the video
--->
<html>
<head>
<title>Popcorn Twitter Video Demo</title>
<script src="../../popcorn.js"></script>
<script src="../../players/youtube/popcorn.youtube.js"></script>
<script src="../../players/vimeo/popcorn.vimeo.js"></script>
<script src="../../plugins/twitter/popcorn.twitter.js"></script>
<script>
document.addEventListener( "DOMContentLoaded", function() {
var srtBtn = document.getElementById( "srtBtn" );
// Add an event listener to the start button to know when it is clicked
srtBtn.addEventListener( "click", btnClick, false );
}, false );
var count = 0;
function btnClick(){
var popcorn, ok = false;
// Anytime after the first click, remove the current video and
// wipe the current twitter feed
if(count != 0){
popcorn = "";
document.getElementById('twitterdiv').innerHTML = "";
}
count++;
// If statements parsing URL entered in the textbox, checking for keywords
// and displaying the video accordingly, displays error message if the
// video type is incompatable
if( document.getElementById( 'vidUrl' ).value.search( "youtube" ) != -1 ){
popcorn = Popcorn.youtube( '#video', document.getElementById( 'vidUrl' ).value );
ok = true;
}
else if( document.getElementById( 'vidUrl' ).value.search( "vimeo" ) != -1 ){
popcorn = Popcorn.vimeo( '#video', document.getElementById( 'vidUrl' ).value );
ok = true;
}
else if( document.getElementById( 'vidUrl' ).value.search( "ogv" ) != -1 ){
document.getElementById( 'video' ).innerHTML =
"<video id='video2'" +
"controls autoplay" +
"width= '250px'>" +
"<source id='ogv'" +
"type='video/ogg; codecs=\"theora, vorbis\"'>" +
"</video>";
document.getElementById( 'ogv' ).src = document.getElementById( 'vidUrl' ).value;
popcorn = Popcorn( '#video2' );
ok = true;
}
else if(document.getElementById( 'vidUrl' ).value.search( "mp4" ) != -1){
document.getElementById( 'video' ).innerHTML =
"<video id='video2'" +
"controls autoplay" +
"width= '250px'>" +
"<source id='mp4'" +
"type='video/mp4; codecs=\"avc1, mp4a\"'>" +
"</video>";
document.getElementById( 'mp4' ).src = document.getElementById( 'vidUrl' ).value;
popcorn = Popcorn( '#video2' );
ok = true;
}
else{
document.getElementById( 'video' ).innerHTML = "</br><b>The link is not a supported video type</b>";
}
if(ok){
// Add twitter widget with associated parameters
popcorn
.twitter({
start: 0, // seconds
end: 45, // seconds
src: document.getElementById( 'hashtag' ).value,
target: 'twitterdiv'
})
.volume(0)
.play();
}
}
</script>
</head>
<body>
<!-- Setup html divs and other tags, as well as input fields and buttons -->
<h3>Twitter Hashtag video demo</h3>
<p>Insert a link to a video(youtube,vimeo,.ogv,or.mp4) and supply a hashtag</p>
<div>
<p>Video URL:</p>
<input id="vidUrl" size="50" value="http://www.youtube.com/watch?v=9oar9glUCL0"/><br />
<p>Twitter Hashtag:</p>
<input id="hashtag" size="20" value="#seneca"/>
<button class="start" id="srtBtn">Play</button><br />
<div id="video" style="width: 360px; height: 300px;" ></div><br />
<div id="twitterdiv" style="position:relative;float:left;width:400px;height:600px"></div>
</div>
</body>
</html>