admin管理员组文章数量:1319484
right now I have an array of videos. How do I make it so when i click next and prev the next or previous video in the array loads.
<video id="video" controls autoplay width="1000">
<source src="videos/test.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="videos/test.ogv" />
</video>
<a href="#" onClick="javascript:vidSwap(vidURL[i+]); return false;">next</a>
<script>
var vidURL=["videos/test.ogv","videos/test2.ogv","videos/test3.ogv","videos/test4.ogv","videos/test5.ogv" ]; // literal array
function vidSwap(vidURL) {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = vidURL;
myVideo.load();
myVideo.play();
}
right now I have an array of videos. How do I make it so when i click next and prev the next or previous video in the array loads.
<video id="video" controls autoplay width="1000">
<source src="videos/test.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="videos/test.ogv" />
</video>
<a href="#" onClick="javascript:vidSwap(vidURL[i+]); return false;">next</a>
<script>
var vidURL=["videos/test.ogv","videos/test2.ogv","videos/test3.ogv","videos/test4.ogv","videos/test5.ogv" ]; // literal array
function vidSwap(vidURL) {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = vidURL;
myVideo.load();
myVideo.play();
}
Share
Improve this question
edited Jun 12, 2023 at 21:48
Jonas
129k102 gold badges327 silver badges405 bronze badges
asked Nov 17, 2011 at 17:17
goetzsgoetzs
1122 silver badges12 bronze badges
1
-
In an onclick attribute, javascript is assumed, so there is no need to preface your function call with
javascript:
. Also I remend getting started with jQuery if you haven't already. – benekastah Commented Nov 17, 2011 at 19:08
4 Answers
Reset to default 2Using yout code, it'll be something like this. What you need to do is have the video that you loaded on a javascript variable. Then, when you click prev or next you can call a function that will put the correct video number and call it.
<script>
var vidURL=["videos/test.ogv","videos/test2.ogv","videos/test3.ogv","videos"]
var video = 0;
function vidSwap() {
var myVideo = document.getElementsByTagName('video')[video];
myVideo.src = vidURL[video];
myVideo.load();
myVideo.play();
}
function prevVideo() {
if(video == 0) {
video = vidUrl.length;
}
else {
video -= 1;
}
vidSwap();
}
function nextVideo() {
if(video == length) {
video = 0;
}
else {
video += 1;
}
vidSwap();
}
</script>
<video id="video" controls autoplay width="1000">
<source src="videos/test.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="videos/test.ogv" />
</video>
<a href="#" onClick="javascript:prevVideo(); return false;">prev</a>
<a href="#" onClick="javascript:nextVideo(); return false;">next</a>
Introduce variable which will save current video index, then increment it or decrement it each time you press next/prev
</script>
var i = 0;
<script>
javascript:vidSwap(vidURL[i++])
It looks like you're missing another plus sign in your increment operator.
Try changing
<a href="#" onClick="javascript:vidSwap(vidURL[i+]); return false;">next</a>
To this
<a href="#" onClick="javascript:vidSwap(vidURL[i++]); return false;">next</a>
Wrapped up alternative with wrap-around;
<a href="#" onClick="return Vids.next();">next</a>
<a href="#" onClick="return Vids.prev();">prev</a>
...
var Vids = (function() {
var _currentId = -1;
var _urls = ["videos/test.ogv","videos/test2.ogv","videos/test3.ogv","videos/test4.ogv","videos/test5.ogv" ]; // literal array
return {
next: function() {
if (++_currentId >= _urls.length)
_currentId = 0;
return this.play(_currentId);
},
prev: function() {
if (--_currentId < 0)
_currentId = _urls.length - 1;
return this.play(_currentId);
},
play: function(id) {
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = _urls[id];
myVideo.load();
myVideo.play();
return false;
}
}
})();
本文标签: javascriptcalling the next item in my arrayStack Overflow
版权声明:本文标题:javascript - calling the next item in my array - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742058865a2418461.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论