Sup3rkirby;1234909 wrote:Let me know if this resolves your issue or not.
Okay, this code seems to be working, although I will be doing more optimizing to get the right features.
After reading about the media object (Audio, Video elements) interface at MSDN and elsewhere to learn
more about object properties, methods, and the events affecting them (thanks to your guidance),
I have slightly modified your functions. The modifications basically use anonymous functions to define
the handlers and pass on arguments into the event handlers themselves.
Global scope script variables are initialized in that scope, namely array of numbers (in seconds)
for the time marks at which I want an image to change in the slideshow document block (a P element,
in this case). Images are basically rotated in and out using DOM methods ( replaceChild() ).
The initialize() function is used after the body is loaded to intiailize the rest of the global variables
that are DOM document nodes. Images for the slideshow are also pre-loaded into an array. Many of
the numerical constants (e.g., "500px") worked for my presentation, and should be altered for another's
particular document styling/spacing.
This particular set up does not "go backwards" perhaps in case the user does a backward seek on the
playback of the control, but that is easy enough to code in.
The reason I making this slideshow is that it is a ballet show with many dancers in the scene.
I am pointing out a particular dancer (this is an "Arts Resume" and the web page link will be sent to
dance instructors) but snapshotting a video instance, putting a simple arrow in Photoshop to
point out the dancer, it allows the instructors to identify the dancer, whom they have never met.
<head>
<!--
.
.
-->
<script type="text/javascript">
var slidesBlock, // DOM element containing slideshow images
timeMarks = [ 50, 70, 80, 170, 200, 250 ],
timeMarkIndex = 0,
currentTimeMark = timeMarks[timeMarkIndex],
preloadedImages = [];
function initialize() {
var i, img, index,
myVid = document.getElementById("ballet-vid"),
slidesBlock = document.getElementById("slideshow");
if (typeof myVid.addEventListener == "function")
myVid.addEventListener("canplay", function () {
initSync(myVid, slidesBlock); }, false);
else if (typeof myVid.attachEvent == "function")
myVid.attachEvent("oncanplay", function () {
initSync(myVid, slidesBlock); } );
// preload images
for (i = 0; i < timeMarks.length; i++) {
img = new Image();
img.alt = "still #" + (i + 1) + " of My Video";
index = "0";
if (i < 9)
index += i + 1;
else
index = i + 1
img.src = "StillsOfMyVideo-" + index + ".png";
img.style.width = "500px";
preloadedImages.push(img);
}
}
function initSync(vidClip, slideShowBlock) {
if (typeof vidClip.addEventListener == "function")
vidClip.addEventListener("timeupdate", function () {
syncSlides(vidClip, slideShowBlock); }, false);
else if (typeof vidClip.attachEvent == "function")
vidClip.attachEvent("ontimeupdate", function () {
syncSlides(vidClip, slideShowBlock); } );
}
function syncSlides(vidClip, slideShowBlock) {
if (vidClip.currentTime > currentTimeMark) {
slideShowBlock.replaceChild(preloadedImages[timeMarkIndex++], slideShowBlock.firstChild);
currentTimeMark = timeMarks[timeMarkIndex];
}
}
</script>
</head>
<body onload="initialize();">
<p style-"margin:0;">
<video controls preload id="ballet-vid" poster="poster.png"
style="float:left;margin:0 1.5em 0.5em -10%;border:1px solid lime;">
style="border:1px solid lime;padding:0;margin:0;">
<source src="myvid.mpg" type="video/mpeg">
<source src="myvid.mp4" type="video/mp4">
<source src="myvid.webm" type="video/webm">
<object data="myvid.mpg" type="video/mpeg" width="750" height="600">
<embed src="myvid.mpg" type="video/mpeg" width="750" height="600">
</object>
</video>
<p id="slideshow"><img src="poster.png" alt="initial image of slideshow">
</body>