jQuery to autoplay HTML5 audio - javascript

Ok, so let me tell you where I'm at. The audio file displays and loads. you can click play to play it. The jQuery isn't autoplaying the material. I'm having to load in the file based on the href of the link. Code is below. Trying to get this to autoplay.
$('.voiceLink a', resbox).click(function(e){
e.preventDefault();
var link = $(this).prop('href'),
audio = $('.audioControl', el.parent());
audio.find('source').prop('src', link);
audio.parent().css('display','inline-block');
audio.find('audio').load();
setTimeout(audio.find('audio').play(), 100);
$(window).scrollTop();
});
resbox = The wrapper box.
The HTML Element:
<div class="audioHide" style="display: none;">
<div class="audioControl" style="position:relative; top:10px; left:50px; display:inline-block;">
<audio controls><source src="#" type="audio/mpeg">
Not Supported
</audio>
</div>
</div>
Example Link:
<a target="_blank" href="http://relatientsounds.s3-website-us-east-1.amazonaws.com/recordings/2456266.mp3">2456266</a>

Edit
try this
audio.find('source').prop('src', link);
audio.parent().css('display','inline-block');
audio.find('audio').load();
//this line
audio.find('audio')[0].play();
Demo http://jsfiddle.net/m25kfy57/1/

Related

toggle videos in hero

I am trying to have 2 different toggle videos as the hero. I will call them Video A and Video B. I want video A to autoplay on the homepage. I have a play button on video A. I want two things to happen when the play button is clicked:
hide Video A.
show video B.
I have successfully hidden Video A when the play button is clicked, but Video B is not visible (I can hear it playing, but cannot see it). I think it is a CSS problem, but am not sure.
Video B is too large to upload (I am using WordPress), so I have it as an iframe. Video A is within a video tag.
HTML:
<video playsinline autoplay muted loop id="poster-video" onclick="hideVid()">
<source src="video.mp4" type="video/mp4">
</video>
<div id="full-video" style="visibility:hidden" onclick="showVid()">
<iframe src="https://player.vimeo.com/video/?autoplay=1&loop=1&title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen" allowfullscreen>
</iframe>
</div>
<div id="xbut">
<span style="cursor:pointer" onclick="hideVid();showVid()">
<div class="ctrbutton"><img src="play-button-dark.png">
</div>
</span>
</div>
CSS:
video {
object-fit: cover;
width: 100vw;
position: absolute;
top: 0;
left: 0;
}
js:
function showVid() {
document.getElementById("full-video").style.display = "block";
}
function hideVid() {
document.getElementById("poster-video").style.display = "none";
}
when you hide video A also set video B visibility on true with

Unable to select video

I am trying to mute / unmute my video. But to start with, it looks like I am not able to select my video. Tried tutorial examples and answers to similar questions but they all point to the same way of selecting the video. Please advice what is wrong here. Thank you.
<!-- HTML -->
<button id="enableMute" onclick="enableMute()" type="button">Mute</button>
<button id="disableMute" type="button">Enable</button>
<button id="checkMute" type="button">Status</button><br>
<video id="myVideo" width="320" height="176" autoplay loop muted>
<source src="video/trailer.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<!-- JS -->
$(function() {
// seems not being selected. Tried without hash and same result.
var vid = $("#myVideo");
//alert works but clearly nothing happening with mute controls
$("#enableMute").click(function(){
alert("enableMute");
vid.muted = true;
vid.volume = 1.0;
});
//alert works but clearly nothing happening with mute controls
$("#disableMute").click(function(){
alert("disableMute");
vid.muted = false;
vid.volume = 1.0;
});
//if i click this button first, the alert is "alert undefined"
$("#checkMute").click(function(){
alert('alert: ' + vid.muted);
});
});
The video is being selected and put into the variable. Using .muted won't work and you need to use jQuery's .prop() function as I found out in this question.
This should work:
HTML
<button id="enableMute" onclick="enableMute()" type="button">Mute</button>
<button id="disableMute" type="button">Enable</button>
<button id="checkMute" type="button">Status</button><br>
<video id="myVideo" width="320" height="176" autoplay loop muted>
<source src="video/trailer.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
JavaScript
$(function() {
// Video is being selected
var vid = $("#myVideo");
$("#enableMute").click(function() {
alert("enableMute");
vid.prop('muted', true);
vid.prop('volume', 1.0);
});
$("#disableMute").click(function() {
alert("disableMute");
vid.prop('muted', false);
vid.prop('volume', 1.0);
});
$("#checkMute").click(function() {
alert('alert: ' + vid.prop('muted'));
});
});
To see it in action with a sample video, go to this link.

Transistioning between html videos

I have a html5 webapp that is going to be displayed on tablet devices. In this webapp there is a video that is playing. The users are able to select different areas in the video to play a different video. This is done by overlaying an invisible image with area tags that call up js to switch the video. What I am wondering is if there is a way to load these videos quicker and possibly add some sort of video transition overtop to make it look more professional. Here is my current app:
<!doctype html />
<html>
<body>
<div id="wrapper">
<video id="video" width="320" height="240" autoplay>
<source src="video1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div style="position: absolute; left: 8px; top: 8px; z-index: 1;">
<img src="" width="320" height="240" usemap="#grid">
<map name="grid">
<area shape="rect" coords="0,0,160,240" href="javascript:loadLeftVideo()" alt="Left">
<area shape="rect" coords="161,0,320,240" href="javascript:loadRightVideo()" alt="Right">
</map>
</div>
</div>
<script>
function loadLeftVideo() {
document.querySelector("#video > source").src = "left.mp4"
var video = document.getElementById('video');
video.load();
video.play();
}
function loadRightVideo() {
document.querySelector("#video > source").src = "right.mp4"
var video = document.getElementById('video');
video.load();
video.play();
}
</script>
</body>
</html>
Alternatively you could try this solution. Based on Googles Media Source API.

redirect to image after video ends

i am working on a site that has a video as soon as we enter the site.
The problem is it just ends and I want to replace it with an image after it ends.
Is there a way I can redirect it within the same container.?
<video id="video_background" preload="auto" volume="5" autoplay="1"><!--or turn on loop="loop"-->
<source src="videos/trailer.webm" type="video/webm">
<source src="videos/trailer.mp4" type="video/mp4">
<source src="videos/trailer.ogv" type="video/ogg ogv">
</video>
You'll have to use JavaScript to detect video end but it's easy to implement:
var video = document.getElementById('video_background');
video.addEventListener('ended', function() {
// show image here
}, false);
I would recommend to target a parent container which has a pre-loaded image hidden and which you toggle to when the event kicks in (obviously also hiding the video element).
You could also add the image dynamically but be aware of that you will have a delay while the image is loading.
You need to wrap your video tag in a div container. Try the following code:
CSS:
#wrapper{
width:640px;
height:360px;
background:#000;
}
#image_background{
display:none;
}
HTML:
<div id="wrapper">
<video id="video_background" preload="auto" volume="5" autoplay="1" width="100%" height="100%">
<source src="videos/trailer.webm" type="video/webm" />
<source src="videos/trailer.mp4" type="video/mp4" />
<source src="videos/trailer.ogv" type="video/ogg ogv" />
</video>
<img id="image_background" src="yourImage.jpg" width="100%" height="100%" />
</div>
JS:
var video = document.getElementById('video_background');
var wrapper = document.getElementById('wrapper');
var image = document.getElementById('image_background');
video.addEventListener('ended', function() {
video.style.display = 'none';
image.style.display = 'inline';
}, false);
EDIT: how do i smooth-en the transition fade it in or something?
I would use jQuery for this as it is built with such functionalities.
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var video = $('#video_background');
var image = $('#image_background');
video.on('ended', function() {
$(this).fadeOut('200',function(){//$(this) refers to video
image.fadeIn('200');
});
});
</script>

Javascript to stop HTML5 video download, restore source when video is played

I'm working on a page that has multiple HTML5 video elements that popup in CSS modal boxes when a link is clicked. The page originally would begin download of every video on the page, but, after finding similar topics here, I was able to set the source to be src="", allowing the page to load quickly.
I'm having difficulty now trying to restore the download when a user selects a video and it pops up in the modal box.
I'm not new to Javascript, but I'm also not proficient. Ideally, each video source should be set to "", then when the video is opened, the video should reload. I also added a function to pause the video when the modal is closed as it used to continue playing. Any help or criticism is appreciated, I'm here to learn. Thanks!
HTML:
<div class="image" style="float:left;margin:0;"><img src="video-image.png" alt="Play visualization" width="150"/><br />Layers
<div id="layers" class="modalDialog">
<div>
Close
<h3>Layers</h3>
<video id="videoContainer" class="videoContainer" loop="loop" style="width:698px;">
<source src="video-file.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="video-file.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="video-file.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>
</div>
</div>
</div>
Javascript:
$(document).ready(function(){
for(var i=0; i< 20; i++)
{
document.getElementsByTagName("video")[i].src="";
}
$("#showModal").click(function() {
var videoID = document.getElementsById("showModal").getAttribute('href');
var videoElement = document.getElementsById(videoID).getElementsByTagName("video");
videoElement.load();
});
$("#closeModal").click(function() {
$("#videoContainer")[0].pause();
});
});
This answer is maybe related.
Dont have your files but got it working using the following code:
<video id="videoContainer" class="videoContainer" style="width:698px;">
<source id="mp4Source" src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
$("#showModal").click(function () {
var videoID = document.getElementById("showModal").getAttribute('href');
var videoElement = document.getElementById("layers").getElementsByTagName("video")[0];
var srcID = document.getElementById("mp4Source");
videoElement.src = srcID.getAttribute("src");
videoElement.load();
videoElement.play();
});

Categories