I am using camendesign's VIDEO FOR EVERYBODY script to embed a video element on my page, and have a flash player fallback for those who do not have HTML5 functionality.
But I am changing al the URLs to be dynamically loaded when the page is called. Everything is parsing out fine except for the flashVars string in the object embed params tag. The value of this params tag needs to be URL Encoded, so I have a bit of javascript before the video is rendered on the page to encode the url for the poster image AND the video file using the values that are loaded in.
My question is this: How do I properly have the two values parse out so that they complete the flashVars value properly?
Here's my code: (consequently, this is a Java site I'm running, hence the JAVA c:sets)
<!DOCTYPE HTML>
<c:set var="title" value="Blender Demo Reel 2013"/>
<c:set var="file" value="bdr2013"/>
<c:set var="poster" value="poster.jpg"/>
<c:set var="width" value="960"/>
<c:set var="height" value="540"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>New Video Player</title>
</head>
<script>
var posterEncode = encodeURIComponent("${poster}");
var fileEncode = encodeURIComponent("${file}");
</script>
<body>
<div id="videoContainer">
<video controls preload poster="${poster}" width="${width}" height="${height}">
<source src="${file}.mp4" type="video/mp4">
<source src="${file}.ogv" type="video/ogg">
<source src="${file}.webm" type="video/webm">
<object type="application/x-shockwave-flash" data="http://player.longtailvideo.com/player.swf" width="${width}" height="${height}">
<param name="movie" value="http://player.longtailvideo.com/player.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="controlbar=over&image="+posterEncode+"&file="+fileEncode+".mp4" />
<img alt="Big Buck Bunny" src="${poster}" width="${width}" height="${height}" title="No video playback capabilities, please download the video below" />
</object>
</video>
</div>
</body>
</html>
The source code when I view this in a browser comes back as this:
<script>
var posterEncode = encodeURIComponent("poster.jpg");
var fileEncode = encodeURIComponent("bdr2013");
</script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>New Video Player</title>
<body>
<div id="videoContainer">
<video controls preload poster="poster.jpg" width="960" height="540">
<source src="bdr2013.mp4" type="video/mp4">
<source src="bdr2013.ogv" type="video/ogg">
<source src="bdr2013.webm" type="video/webm">
<object type="application/x-shockwave-flash" data="http://player.longtailvideo.com/player.swf" width="960" height="540">
<param name="movie" value="http://player.longtailvideo.com/player.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="controlbar=over&image="+posterEncode+"&file="+fileEncode+".mp4" />
<img alt="Big Buck Bunny" src="poster.jpg" width="960" height="540" title="No video playback capabilities, please download the video below" />
</object>
</video>
</div>
</body>
</html>
You're just writing out HTML attributes. There's no need for JavaScript here. URI encode the strings in Java and put them in Java variables and then put them in your HTML just like you do with any other Java variable:
<param name="flashVars" value="controlbar=over&image=${posterEncoded}&file=${fileEncoded}.mp4" />
HUZZAH!
<!DOCTYPE HTML>
<c:set var="title" value="Blender Demo Reel 2013"/>
<c:set var="file" value="bdr2013"/>
<c:set var="poster" value="poster.jpg"/>
<c:set var="width" value="960"/>
<c:set var="height" value="540"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>New Video Player</title>
</head>
<body>
<div id="videoContainer">
<video controls preload poster="${poster}" width="${width}" height="${height}">
<source src="${file}.mp4" type="video/mp4">
<source src="${file}.ogv" type="video/ogg">
<source src="${file}.webm" type="video/webm">
<object type="application/x-shockwave-flash" data="http://player.longtailvideo.com/player.swf" width="${width}" height="${height}">
<param name="movie" value="http://player.longtailvideo.com/player.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<script>
var posterEncode = encodeURIComponent("${poster}");
var fileEncode = encodeURIComponent("${file}");
document.write("<param name='flashVars' value='controlbar=over&image="+posterEncode+"&file="+fileEncode+".mp4' />");
</script>
<img alt="${title}" src="${poster}" width="${width}" height="${height}" title="${title}" />
</object>
</video>
</div>
</body>
</html>
I threw the javascript encodeURIComponent function and a document.write into where I need the dynamic param line to be, and SHAZAM! worked like a charm.
Related
I need to control the play and pause of video element in my website. The significant part of the html is given below.
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="800" height="515">
<param name="pluginspage" value="http://www.apple.com/quicktime/download/" />
<param name="src" value="http://lms.alefeducation.com/pluginfile.php/886/mod_lesson/page_contents/506/6N1.1%20Intro%20Video.mp4" />
<param name="controller" value="true" />
<param name="loop" value="false" />
<param name="autoplay" value="false" />
<param name="autostart" value="false" />
<param name="scale" value="aspect" />
<!--[if !IE]>-->
<object data="http://lms.alefeducation.com/pluginfile.php/886/mod_lesson/page_contents/506/6N1.1%20Intro%20Video.mp4" type="video/mp4" width="800" height="515">
<param name="src" value="http://lms.alefeducation.com/pluginfile.php/886/mod_lesson/page_contents/506/6N1.1%20Intro%20Video.mp4" />
<param name="pluginurl" value="http://www.apple.com/quicktime/download/" />
<param name="controller" value="true" />
<param name="loop" value="false" />
<param name="autoplay" value="false" />
<param name="autostart" value="false" />
<param name="scale" value="aspect" />
<!--<![endif]-->
<span class="mediaplugin mediaplugin_html5video">
<video controls="true" width="800" height="500" preload="metadata" title="6N1.1 Intro Video.mp4">
<source src="http://lms.alefeducation.com/pluginfile.php/886/mod_lesson/page_contents/506/6N1.1%20Intro%20Video.mp4" type="video/mp4"></source>
<a class="mediafallbacklink" href="http://lms.alefeducation.com/pluginfile.php/886/mod_lesson/page_contents/506/6N1.1%20Intro%20Video.mp4">6N1.1%20Intro%20Video.mp4</a>
</video>
</span>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</span><br></p>
Now I am trying to control the video with the following code
var videos = document.querySelectorAll('video');
for(i=0;i<videos.length;i++) {
videos[i].id = 'video-'+i;
}
$(document).ready(function () {
var interval = self.setInterval(function(){LoopForever()},1000);
var video0 = document.getElementById('video-0');
function LoopForever() {
$.ajax({url:"http://localhost/StudentState.php",
headers: {
'Access-Control-Allow-Origin': '*'
},
success:function(data){
var video0 = document.getElementById('video-0');
if(video0.ended == false){
if(data >0){
video0.play();
} else{
video0.pause();
}
}
}
})
}
});
But what happens that two video objects are created. And from the javascript code above, only the newly created object is being controlled, not the object being shown in the browser.
Do anyone have answer to this???
Update
The complete code goes here:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<p><span class="mediaplugin mediaplugin_qt">
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="800" height="515">
<param name="pluginspage" value="http://www.apple.com/quicktime/download/" />
<param name="src" value="Area_of_irregular_shape.mp4" />
<param name="controller" value="true" />
<param name="loop" value="false" />
<param name="autoplay" value="false" />
<param name="autostart" value="false" />
<param name="scale" value="aspect" />
<!--[if !IE]>-->
<object data="Area_of_irregular_shape.mp4" type="video/mp4" width="800" height="515">
<param name="src" value="Area_of_irregular_shape.mp4" />
<param name="pluginurl" value="http://www.apple.com/quicktime/download/" />
<param name="controller" value="true" />
<param name="loop" value="false" />
<param name="autoplay" value="false" />
<param name="autostart" value="false" />
<param name="scale" value="aspect" />
<!--<![endif]-->
<span class="mediaplugin mediaplugin_html5video">
<video controls="true" width="800" height="500" preload="metadata">
<source src="Area_of_irregular_shape.mp4" type="video/mp4"></source>
</video>
</span>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</span><br></p>
<script>
var videos = document.querySelectorAll('video');
for(i=0;i<videos.length;i++) {
videos[i].id = 'video-'+i;
}
$(document).ready(function () {
var interval = self.setInterval(function(){LoopForever()},1000);
var video0 = document.getElementById('video-0');
function LoopForever() {
$.ajax({url:"http://localhost/StudentState.php",
headers: {
'Access-Control-Allow-Origin': '*'
},
success:function(data){
var video0 = document.getElementById('video-0');
if(video0.ended == false){
if(data >0){
video0.play();
} else{
video0.pause();
}
}
}
})
}
});
</script>
</body>a
</html>
Now if I debug it in chrome, it is replicated.
I understood the problem and got a hack around it.
The inner object has a type video/mp4. So browser was rendering it as a video. And javascript code was just identifying it as an object. When trying to get video object through code, the script was giving reference to the code in video tag. So, two instances of the same video has been created. And through javascript, only the second video could be controlled.
Now here I got the hack. I won't say it is a standard solution. But its a way around the problem.
I got reference to the video element and appended it to the outer object. Now I removed the inner object.
So, the new video got rendered and now I have controls of the video through javascript.
Here goes the relevant code.
var objects = document.getElementsByTagName('object');
var video = objects[1].lastElementChild.firstChild.nextElementSibling;
var object0 = objects[0];
object0.appendChild(video);
object0.removeChild(object0.childNodes[17]);
var video = object0.lastChild;
I have 2 swf in my html page which are video and popup. When mouse over to video.swf the hidden popup.swf will show and play.
<body>
<object id="video" class="video" width="300" height="250">
<param name="movie" value="thumbnail.swf">
<embed src="thumbnail.swf" quality="high" width="300" height="250" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/>
</object>
<img class="image" src="300x250.jpg">
<object id="popup" class="popup" width="790" height="290">
<param name="movie" value="790x290.swf">
<embed src="790x290.swf" width="300" height="250"> </embed>
</object>
<script>
document.getElementById("video").onmouseover = over;
(function over()
{
alert("mouseovertest");
});
</script>
The mouseover on video.swf is working fine but Im not sure how to make the popup.swf shows and play.
put this in your <script> section:
document.getElementById("popup").onmouseover = over;
I am looking for a method to add the controls attribute to a video tag based upon the user agent string.
I do not wish to have the controls attribute present on any browser or device other than Ipad and Android. So i thought that user agent was the best way to identify because the words ipad and android are present in their respective UA header.
What is the best way to accomplish my goal?
I've tried this with no luck:
<script type="text/javascript">
var myVideo = document.getElementById("myVideo");
var agent = navigator.userAgent.toLowerCase();
var addAttr = (agent.indexOf('ipad')!=-1) || agent.indexOf('android')!=-1);
if (addAttr) {
myVideo.setAttribute("controls","controls");
}
else {
document.write("");
}
</script>
and here is my html5 video stuff
<video id="myVideo" width="1170" height="324" preload="metadata" autoplay="true">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,16,0"
width="1170" height="324" >
<param name="movie" value="movie.swf">
<param name="quality" value="high">
<param name="play" value="true">
<param name="LOOP" value="false">
<embed src="movie.swf" width="1170" height="324" play="true" loop="false" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash">
</embed>
</object>
</video>
Any help would be appreciated!
And without jQuery, surprisingly even shorter:
//Add
myVideo.controls = "controls";
//Remove
myVideo.controls = "";
Based on that you already created a variable myVideo as you did:
var myVideo = document.getElementById("myVideo");
Hope that helped :)
You can do it with jQuery:
//Add
$('#myVideo').prop("controls", true);
//Remove
$('#myVideo').prop("controls", false);
You can also add controls attribute like this:
myVideo.controls = true;
I'm creating pages for a small web-based game which must have some background music playing. Those pages should be compatible with most desktop browsers, including IE8 (but we can ignore the mobile browsers).
Of course I'd like to allow the user to stop the music. And this is where it gets tricky.
Here's what I use currently (with jQuery) :
<audio id="main_audio" autoplay="autoplay" preload="auto" loop="loop">
<source src="sounds/bgmusic.mp3" type="audio/mpeg" />
<source src="sounds/bgmusic.ogg" type="audio/ogg" />
<embed hidden="true" autostart="true" loop="true" src="sounds/bgmusic.mp3" />
</audio>
<div id="controls" class="controls">
<a id="playpause" class="play">Play/Pause</a>
</div>
<script>
function isPlaying(audio) {return !audio.paused;}
var a = document.getElementById('main_audio');
$('#playpause').on('click', function() {
if (isPlaying(a)) {
a.pause();
} else {
a.play();
}
});
</script>
This works fine in all browsers, but IE. (I'm on Windows XP so testing on IE8 currently.)
On IE8, the audio starts playing (which is good) but the controls don't do anything so it's impossible to stop the music (and restart it).
How can I make this script work for IE too? In other word, interact with the embed tag (but only in IE)?
Try next code:
<audio id="main_audio" autoplay="autoplay" preload="auto" loop="loop">
<source src="sounds/bgmusic.mp3" type="audio/mpeg" />
<source src="sounds/bgmusic.ogg" type="audio/ogg" />
<embed id="main_audio_ie8" hidden="true" autostart="true" loop="true" src="sounds/bgmusic.mp3" />
</audio>
<div id="controls" class="controls">
<a id="playpause" class="play">Play/Pause</a>
</div>
<script>
var isPlaying = function(audio) {return !audio.paused;}
var a = document.getElementById('main_audio');
if(!(a.play instanceof Function)){
a = document.getElementById('main_audio_ie8');
isPlaying = function(audio) {return audio.playState==2;}
}
$('#playpause').on('click', function() {
if (isPlaying(a)) {
a.pause();
} else {
a.play();
}
});
</script>
Another variant (code must work if WMPlayer.OCX exist on system; checked on Win2K+IE6SP1+WMP7, WinXP+IE6SP1+WMP9, WinXP+IE8+WMP11):
<audio id="main_audio" autoplay="autoplay" preload="auto" loop="loop" volume="1.0">
<source src="sounds/bgmusic.mp3" type="audio/mpeg" />
<source src="sounds/bgmusic.ogg" type="audio/ogg" />
<object id="main_audio_ie8" classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" style="display:none;">
<param name="URL" value="sounds/bgmusic.mp3" />
<param name="uiMode" value="invisible" />
<param name="autoStart" value="true" />
<param name="volume" value="100" />
<param name="playCount" value="2147483647" /> <!-- (Int32) 2^31-1==2147483647 - maximum allowed count (for 1 second length audio is equals to 68+ years) -->
</object>
</audio>
<div id="controls" class="controls">
<a id="playpause" class="play">Play/Pause</a>
</div>
<script type='text/javascript'>
window.onload=function(){
var isPlaying,a=document.getElementById('main_audio');
if(a.play instanceof Function)isPlaying=function(audio){return !audio.paused;};
else{
a=document.getElementById('main_audio_ie8');
isPlaying=function(audio){return audio.playState==3;};
a.play=function(){this.controls.play();}
a.pause=function(){this.controls.pause();}
}
document.getElementById('playpause').onclick=function() {
if (isPlaying(a)) {
a.pause();
} else {
a.play();
}
};
};
</script>
In my onbeforeunload event, it asked the user whether they want to leave the page or stay on it. When they click "stay on page", I want it to then redirect them to another webpage in the same window. It sounds weird, but that's what I've been assigned to do. Basically, the main page plays a video - I think advertising to buy something, and when they close but then decide to stay on the page, we want the video to go away/stop playing and some different information to appear (a different "webpage"). Is there a way to do this, without just showing/hiding divs? Can I override the function? I'm currently trying to do it this way(as seen below) but now the dialog box is not showing up at all. It was working before Any ideas as to what I'm doing wrong, or how to accomplish this task?
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The Shocking Truth - Cabot Market Letter</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#vid").show();
$("#div2").hide();
});
var test = 1;
function manipulatetest()
{
test = 2;
}
window.onbeforeunload = onbeforeunload_Handler;
function onbeforeunload_Handler()
{ if (test == 1){
$("#vid").hide();
$("#div2").show();
var confirm = confirm("Would you like to stay on this page?");
if (confirm == true) {
window.location = "http://www.google.com";
}
}
}
</script>
</head>
<style type="text/css">
body {
background-color: #e0e6e5;
}
#vid {
margin: 20px auto;
width: 920px;
}
</style>
<body>
<div id="vid">
<video width="920" height="540" autoplay preload controls>
<source src="shockingtruth.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="shockingtruth.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="shockingtruth.ogv" type='video/ogg; codecs="theora, vorbis"'>
<object width="920" height="540" type="application/x-shockwave-flash"
data="flowplayer-3.2.1.swf">
<param name="movie" value="flowplayer-3.2.7.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"clip": {"url": "http://www.cabot.net/videos/shocking-truth/shockingtruth.mp4", "autoPlay":true, "autoBuffering":true}}' />
<p>Download video as MP4, WebM, or Ogg.</p>
</object>
</video>
</div>
<div id="div2">
<video width="920" height="540" autoplay preload controls>
<source src="shockingtruth.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="shockingtruth.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="shockingtruth.ogv" type='video/ogg; codecs="theora, vorbis"'>
<object width="920" height="540" type="application/x-shockwave-flash"
data="flowplayer-3.2.1.swf">
<param name="movie" value="flowplayer-3.2.7.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"clip": {"url": "http://www.cabot.net/videos/shocking-truth/shockingtruth.mp4", "autoPlay":true, "autoBuffering":true}}' />
<p>Download video as MP4, WebM, or Ogg.</p>
</object>
</video>
</div>
<p style="text-align: center;">Click Here To Order</p>
</body>
A dirty trick is a setTimeout, and see whether it still runs: http://jsfiddle.net/FJ4LR/1/.
window.onbeforeunload = function() {
setTimeout(function() {
alert('You clicked stay.');
}, 500);
return 'Really?';
};