I'm just wondering how to change src attribute value using jQuery after clicking a link. I want when user click a link on the webpage, a new video will be played as a transition to another page. Here's what my html and jquery look like right now:
<script type = "text/javascript" src = "jquery-1.10.2.js"></script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("a").click(function() {
//alert("Test");
$("#vid source:nth-child(1)").attr("src","Media/bar-transition.mp4");
$('#vid source:nth-child(2)').attr("src","Media/bar-transition.webm");
$('#vid source:nth-child(3)').attr("src","Media/bar-transition.ogv");
$('#vid')[0].play();
});
});
</script>
<body onload = "setTimeout(showIt,3000)">
<div id="main">
<video id="vid" autoplay />
<source src="Media/test-vid-rev.mp4" type="video/mp4" />
<source src="Media/test-vid-rev.webm" type="video/webm" />
<source src="Media/test-vid-rev.ogv" type="video/ogg" />
Your browser do not support the video type
</video>
<div class="nav-transition">
<ul id="nav">
<li id="graphic"> </li>
<li id="product"> </li>
<li id="digital"> </li>
<li id="view"> </li>
</ul>
</div>
</div>
when I clicked the link("#g","#p",etc), the video source doesn't get changed..is there anything wrong with my jQuery syntax? Can anybody help? I'm a newbie to jQuery..
Thx
-zangetsKid
I think you need to add
$('#vid')[0].load()
Related
I have a page with few HTML5 video players, and i want to play all of them in 0.5x speed. I have shown js snippet that runs for single video player only.
<script type="text/javascript">
/* play video twice as fast */
document.querySelector('video').defaultPlaybackRate = 1.0;
document.querySelector('video').play();
/* now play three times as fast just for the heck of it */
document.querySelector('video').playbackRate = 3.0;
</script>
This works for first video only. I need it for every video. Below is a snippet of a part of html.
<ul class="regular slider">
<li class="videodiv" style="background-image: url('boxing.jpg')">
<video preload="yes" loop>
<source src="12950321.mp4" type="video/mp4"/>
</video>
<div class="slantedcaption">Boxing</div>
<a href="detail.html">
<div class="caption">
<h2>Boxing</h2>
<div class="category">Passion</div>
</div>
</a>
</li>
<li class="videodiv" style="background-image: url('coding.jpg')">
<video preload="yes" loop>
<source src="14019065.mp4" type="video/mp4"/>
</video>
<div class="slantedcaption">Boxing</div>
<a href="detail.html">
<div class="caption">
<h2>Boxing</h2>
<div class="category">Passion</div>
</div>
</a>
</li>
<li class="videodiv" style="background-image: url('dance.jpg')">
<video preload="yes" loop>
<source src="12950321.mp4" type="video/mp4"/>
</video>
<div class="slantedcaption">Boxing</div>
<a href="detail.html">
<div class="caption">
<h2>Boxing</h2>
<div class="category">Passion</div>
</div>
</a>
</li>
</ul>
Change in Javscript file as:
<script type="text/javascript">
/* play video twice as fast */
document.querySelector('video').defaultPlaybackRate = 1.0;
document.querySelector('video').play();
/* now play three times as fast just for the heck of it */
var videos =document.querySelectorAll('video');
for (var i=0;i<videos.length;i++)
{
videos[i].playbackRate = 3.0;
}
</script>
The mistake is as you use querySelector , it returns one video object.
As the querySelectorAll,returns the array of objects (as all video tag) .So you have to iterate the array and increase the speedrate of video.
Hope it may helps.
Happy Coding!!
This is because querySelector only returns the first element.
You can use querySelectorAll instead if you want to access multiple video tags.
querySelectorAll will return an array of all your videos, then you will need to loop them to apply your defaultPlaybackRate.
Example:
var videos = document.querySelectorAll('video');
for(i=0;i<videos.length;i++){
videos[i].playbackRate = 0.5;
}
I am building a custom controls HTML5 video player. You can see it HERE.
The problem I ran into is being unable to display the video's duration before playing it.
The HTML:
<div class="video-container">
<video poster="img/flamenco.jpg">
<source src="flamenco.mp4" type="video/mp4" />
<source src="flamenco.ogg" type="video/ogg" />
</video>
<div class="controls-wrapper">
<div class="progress-bar">
<div class="progress"></div>
</div>
<ul class="video-controls">
<li><input type="button" name="play-pause" value="Play" class="play"></li>
<li><input type="button" name="prev" value="Previous video" class="previous"></li>
<li><input type="button" name="next" value="Next video" class="next"></li>
<li class="mute-toggle unmuted"><input type="checkbox" name="mute" value="Mute"></li>
<li class="volume-container"><input class="volume-slider" type="range" value="1" max="1" step="0.01"></li>
<li class="show-time disable-select"><span class="current-time">00:00</span><span>/</span><span class="duration"></span></li>
<li class="fullscreen-container"><input type="button" name="toggle-fullscreen" value="Fullscreen" class="fullscreen"></li>
</ul>
</div>
</div>
The JavaScript:
var currentTimeDuration = function(){
var currTimeStr = Math.round(video.currentTime).toString();
var durationStr = Math.round(video.duration).toString();
$('.current-time').text(currTimeStr.timeFormat());
$('.duration').text(durationStr.timeFormat());
}
$(video).on('timeupdate', function(){
currentTimeDuration();
});
The problem with the function above is that it only displays the current time and duration of the video after it has started. I wish it would show something like 00:00 / 02:22 on page load.
Any hints? Thank you!
video.duration is correct after 'loadedmetadata' event. Try to add metadata loaded handler:
$(video).on('loadedmetadata', function(){
currentTimeDuration();
});
i have two ng-repeats that i would like to connect together using their unique id. The idea is that you click a movie poster and the corresponding streaming video will come up the screen above using CSS hide/show. This is what i have so far:
<div class="contentContainer" ng-app="webtest">
<div class="" ng-controller="LandingPageController">
<div class="videoContainer" ng-repeat="movie in movies" >
<video width="800" controls>
<source src="{{movie.stream}}" type="video/mp4">
</video>
</div>
<div class="moviesContainer">
<div class="movieCell" ng-repeat="movie in movies">
<a href="#tab{{movie.id}}">
<img class="movieCellImage" src="content/images/moviePosters/{{movie.images.cover}}">
<div class="movieCellImageBackground">
<div class="movieCellTitle">{{movie.title}} {{movie.id}}</div>
</div>
</a>
</div>
</div>
</div>
</div>
If you use Angular, you don't have to/ should use jQuery.
Angular allows you to handle click event with ng-click.
To your <a> add ng-click="select_video(movie.id)" (you can also remove href).
And you controller should look like this:
var app = angular.module('{your-app-id}', []);
app.controller('LandingPageController', function ($scope) {
$scope.selected_id = null;
$scope.movies = (...) /* The array of movies. */
$scope.select_video = function(id) {
$scope.selected_id = id;
};
});
Then, to every .videoContainer > * add ng-if="selected_id == movie.id".
Should work, let me know if it doesn't.
EDIT:
Also reorganize your HTML like this:
<div ng-controller="...">
<div class="videoContainer" ng-repeat="...">
<div ng-if="...">
<!-- <video /> here, and stuff visible only if this video is selected -->
</div>
<!-- Your <a /> -->
</div>
</div>
You don't need 2 loops. Create a reference to selected item, and set it up in the loop like:
<a ng-click="selectedMovie = movie">...</a>
Let then angular do everything for you.
<div ng-controller="LandingPageController">
<video width="800" controls>
<source src="{{selectedMovie.streams[0].url}}" type="video/mp4">
</video>
<div class="newscontainer">{{selectedMovie.id}} CLICKED</div>
<div class="moviesContainer" id="tabs">
<div class="movieCell" ng-repeat="movie in movies">
<a ng-click="selectedMovie = movie">
<img class="movieCellImage" src="content/images/moviePosters/{{movie.images.cover}}">
<div class="movieCellImageBackground">
<div class="movieCellTitle">{{movie.title}} {{movie.id}}</div>
</div>
</a>
</div>
</div>
</div>
EDIT:
Not tested, may not work. If so, try <a ng-click="$parent.selectedMovie = movie">...</a>
In my video template site, I want to change the source tag of the video when I'm clicking on HQ, only the video should start playing, without a click on the play button, and the text of the link should change to nq in the same function.
Following the html code
{{if hqnq == true }} //jquery template variable no importance
<div class="toolbar" id="controls">
<div style="float:right">
HQ
// the text of the link should change when you are clicking
</div>
<div style="clear:both"></div>
</div>
{{/if}}
<div id="video_player">
<video autobuffer controls autoplay>
<source src="http://www.tools4movies.com/Droid/Default/Inception.mp4" type="video/mp4" width="auto" height="auto" id="video" />
</video>
</div>
And at least there should be a function that will be performing the task. But how to do that?
<script type="text/javascript">
var button = document.getElementById('player_hq_nq');
function showVideo() {
if (button.title == "nq") {
document.getElementById("video").setAttribute("src", "http://www.tools4movies.com/Droid/Default/Inception.mp4");
document.getElementById("video").load();
document.getElementById("video").play();
} else {
document.getElementById("video").setAttribute("src", "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4");
document.getElementById("video").load();
document.getElementById("video").play();
button.title = "nq";
}
}
</script>
Here is the fiddle: http://jsfiddle.net/k68Zp/389/
You need to call showVideo() onclick of HQ. so you need to add following code just above the showVideo() function.:
$(document).ready(function(){
$("#player_hq_nq").click(function(){
showVideo();
});
});
I am trying to build a client side solution for a HTML5 video playlist, I cannot use AJAX or XML for this project and it is causing me some issues.
Basically I have a video tag loading in one video and then an unordered list called 'playlist' that has all my videos in it. I have it working so that it can play either Mov's or Ogv's out of one page as a playlist but I cannot get a fallback working within the list. I am a little stuck, I have read that browser sniffing is old practice but cannot come up with a solution. Any help would be greatly appreciated!
Here is my code so far -
**HTML**
<!-- /playlist -->
<div class="span2">
<ul id="playlist">
<li class="active">
<img src="images/video/image1.jpg" style="margin-bottom:21px;">
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<!-- /playlist -->
<!-- /video -->
<div class="span9">
<video id="video" width="960" height="600" controls="controls" autoplay="autoplay">
<source type="video/mp4" src="disc_content/video/retro_photography_effects/holga.mov" />
<source type="video/ogg" src="http://www.advancedphotoshop.co.uk/discs/101/ogvs/holga.ogv" />
<img src="images/generic/vid_holder.png" alt="html5 video error" width="640" height="360" />
<p> Your video tag is not supported</p>
</video>
</div>
<!-- /video -->
**Javascript**
<!-- Video Playlist START -->
var video;
var playlist;
var tracks;
var current;
init();
function init(){
current = 0;
video = $('#video');
playlist = $('#playlist');
tracks = playlist.find('li a');
len = tracks.length - 1;
video[0].volume = .60;
video[0].play();
playlist.find('a').click(function(e){
e.preventDefault();
link = $(this);
current = link.parent().index();
run(link, video[0]);
});
video[0].addEventListener('ended',function(e){
current++;
if(current == len){
current = 0;
link = playlist.find('a')[0];
}else{
link = playlist.find('a')[current];
}
run($(link),video[0]);
});
}
function run(link, player){
player.src = link.attr('href');
par = link.parent();
par.addClass('active').siblings().removeClass('active');
video[0].load();
video[0].play();
}
<!-- Video Playlist END -->
**HTML**
<!-- /playlist -->
<div class="span2">
<ul id="playlist">
<li class="active">
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<!-- /playlist -->
<!-- /video -->div class="span9">
<video id="video" width="960" height="600" controls="controls" autoplay="autoplay">
<source type="video/mp4" src="disc_content/video/retro_photography_effects/holga.mov" />
<source type="video/ogg" src="http://www.advancedphotoshop.co.uk/discs/101/ogvs/holga.ogv" />
<img src="images/generic/vid_holder.png" alt="html5 video error" width="640" height="360" />
<p> Your video tag is not supported</p>
</video>
</div>
<!-- /video -->
//Javascript
function run(link, player){
$(player).children().eq(0).attr("src",link.attr('href'));
$(player).children().eq(1).attr("src",link.attr('rel'));
par = link.parent();
par.addClass('active').siblings().removeClass('active');
video[0].load();
video[0].play();
}
I have changed your HTML a little bit and then i have changed the "run()" function to replace both the source tags.