I have 4 buttons in a page. Each button is having 4 video paths but the video tag keeps playing the first path I have given to it for all 4 buttons. This is how I tried solving it:
function PlayRecordedWordSoundFile(x)
{
debugger;
var video = document.getElementById('vidplayer');
var sel=x;
video.pause();
video.removeAttribute('src'); // empty source
video.load();
var source=document.createElement('source');
source.setAttribute('src',"/x/"+sel);
video.appendChild(source);
video.play();
}
<button type="button" id="Listen" title="Listen" class="normal-but btnlistenB" value="Listen" data-id='<%# Eval("videoFilePath") %>'>Listen</button>
<video id="vidplayer"></video>
$(document).on('click','.btnlistenB',function(){
PlayRecordedWordSoundFile($(this).attr('data-id'));
return false;
});
Each button should be playing its own defined path. I have shown only one button demo since all of them are identical. Can anybody tell me what I have been doing wrong here?
First make sure you are not using the same id for all the buttons. Also since you haven't added the button click listener, I'm just using an onclick listener on the button here.
Check this working codepen here.
<video id="vidplayer" width="670" height="377" autoplay="true" controls="controls">
<source id="vidsrc"
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
type='video/mp4'>
</video>
<button type="button" id="Listen" title="Listen" class="normal-but btnlistenB"
data-id='http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4'
onclick="PlayRecordedWordSoundFile(this.getAttribute('data-id'));">
Listen
</button>
And then,
function PlayRecordedWordSoundFile(x) {
var video = document.getElementById("vidplayer");
var source = document.getElementById("vidsrc");
var sel = x;
video.pause();
source.removeAttribute("src"); // empty source
video.load();
source.setAttribute("src", "" + sel);
video.play();
}
Related
I have a sample html5 video with simple html code.
What I need to do is a customized mute button for all the videos, meaning:
if the user clicks on the mute/unmute button for one video, all the other videos get muted/unmuted as well
Is there any way of doing this?
without your html code it is pretty vague but in JS you can do it :
here is a link of the documentation im using :
https://www.w3schools.com/tags/av_prop_muted.asp
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_av_prop_muted
<button onclick="enableMute()" type="button">Mute sound</button>
<button onclick="disableMute()" type="button">Enable sound</button>
<video id="myVideo" width="320" height="176" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<script>
var vid = document.getElementById("myVideo");
function enableMute() {
vid.muted = true;
}
function disableMute() {
vid.muted = false;
}
</script>
So to trigger the action on all your videos you can :
add a class preferably or id on all your video tag
make js know about them
var vid = document.getElementById("myVideo");
var vid1 = document.getElementById("myVideo1");
var vid2 = document.getElementById("myVideo2");
var vid3 = document.getElementById("myVideo3");
var vid4 = document.getElementById("myVideo4");
add an onClick action on a button that trigger an action here Mute action which will mute or unmute your videos using the mute property of your element, the action would like
function enableMute() {
vid.muted = true;
vid1.muted = true;
vid2.muted = true;
vid3.muted = true;
vid4.muted = true;
}
I think you could do it without this much duplication of code if you add the same class to all your element, and looping through all of them in the action you trigger when you click on the button and then change for each of them their property but not sure exactly how to do it
I'm having difficulty calling a JavaScript function to play a video using a button element. My function script is as follows:
<button onclick = "PlayVid()">Play</button>
<button onclick = "PauseVid()">Pause</button>
<button onclick = "MaxScreen()">Full Screen</button>
<button onclick = "NorScreen()">Normal Size</button>
<div class = "video">
<video>
<source src="YellowEyePenguinVid.mp4" type="video/mp4">
</video>
</div>
<script>
var Video = document.getElementById("YellowEyePenguinVid");
function PlayVid()
{
vid.play();
}
function PauseVid()
{
vid.pause();
}
function MaxScreen()
{
Video.width = 560;
}
function NorScreen()
{
Video.width = 260; <!-- Brings video back to original size -->
}
</script>
I have declared the function that each button should call from but they are unresponsive. I've also tried quoting the name of the video inside the brackets but that doesn't work either. Could someone point out where i'm going wrong? This is the layout for other JS I have on my site and function is called successfully.
Thanks
Try this snippet. I think some parts of the player is missing, and that is why play() , pause(), and width() is not defined.
Solution
Replace
vid.play(); and vid.pause();
with
Video.play(); and Video.pause();
Since you have invoked variable as Video, not vid.
var Video = document.getElementById("YellowEyePenguinVid");
function PlayVid() {
Video.play();
}
function PauseVid() {
Video.pause();
}
function MaxScreen() {
Video.width = 560;
}
function NorScreen() {
Video.width = 260; // Brings video back to original size
}
<button onclick="PlayVid()">Play</button>
<button onclick="PauseVid()">Pause</button>
<button onclick="MaxScreen()">Full Screen</button>
<button onclick="NorScreen()">Normal Size</button>
<div class="video">
<video>
<source src="YellowEyePenguinVid.mp4" type="video/mp4">
</video>
</div>
shouldn't these:
function PlayVid()
{
Video.play(); //instead of vid.play()
}
function PauseVid()
{
Video.pause(); //instead of vid.pause()
}
if you have error message in the console paste it here, if this would solve your problem you might had a log like :
can't read property play of undefined
Replace your function with this
function PlayVid()
{
Video.play();
}
Maybe you do not have a link to scripts
you hava two option :
1.
write scripte on the page after titel
2.
write on javascript fille and put a link
under the titel
tip :
do alert on the function to see if its work!
few things need to look over,
you didn't give the id attribute to video tag.
you created an instance as Video with "V" capital but, in reality, you are using video as small case
try below code out,
<!DOCTYPE html>
<html>
<body>
<button onclick="PlayVid()">Play</button>
<button onclick="PauseVid()">Pause</button>
<button onclick="MaxScreen()">Full Screen</button>
<button onclick="NorScreen()">Normal Size</button>
<div class="video">
<video id="myVideo" width="320" height="176">
<source src="https://www.w3schools.com/tags/movie.ogg" type="video/mp4"> Your browser does not support HTML5 video.
</video>
</div>
<script>
var vid = document.getElementById("myVideo");
function PlayVid() {
vid.play();
}
function PauseVid() {
vid.pause();
}
function MaxScreen() {
vid.width = 560;
}
function NorScreen() {
vid.width = 260; <!-- Brings video back to original size -->
}
</script>
<p>Video courtesy of Big Buck Bunny.</p>
</body>
</html>
I have used a live video source for the sake of visual testing. you could replace the source as per your wish
I am trying to change the audio file on a button click and am getting the error
Uncaught TypeError: audio.load is not a function
My code is below, the idea is to press the button and then the audio file will change.
Without the audio.load() line, the code will run and the src will update, but the audio does not change. What am I missing?
HTML:
<!DOCTYPE HTML>
<html>
<body>
<br>
<audio controls>
<source src = "audio_file_1.mp3"
id="audio" type="audio/mpeg">
Your browser does not support the audio element!
</audio>
<br>
<button onClick="changeAudio();">Change</button>
</body>
<script src="temp.js"></script>
</html>
Javascript:
// temp js
var a = 1;
function changeAudio() {
var audio = document.getElementById('audio');
if (a==1) {
audio.src = 'audio_file_1.mp3';
a = 2;
}
else {
audio.src = 'audio_file_2.mp3';
a = 1;
}
audio.load();
}
changeAudio();
(also, if anyone knows example sound files that I can use instead of the audio_file_1.mp3 and audio_file_2.mp3, I would be happy to update the code so anyone can run it more easily)
Edit WRT Rob M's answer:
For anyone with the same problem, the solution is to change two lines:
First, in the HTML code, the <audio control> should turn to <audio control id="audio_id">
Second, in the javascript code the audio.load() should turn to document.getElementById('audio_id').load();
There is no .load() event on a <source> tag, it is on the <audio> tag - update your code to call load() on the parent <audio> tag and it should work.
Well, I think you are trying to access to <audio> element by its id attribute, but you haven't set id attribute to audio tag.
It must be something like this
<audio id="audio" controls>
<source src = "audio_file_1.mp3"
id="track" type="audio/mpeg">
Your browser does not support the audio element!
</audio>
And changing audio file:
var a = 1;
function changeAudio() {
var audio = document.getElementById('audio');
if (a==1) {
document.getElementById('track') = 'audio_file_1.mp3';
a = 2;
}
else {
document.getElementById('track') = 'audio_file_2.mp3';
a = 1;
}
audio.load();
}
changeAudio();
mates!
I was needed a simple text button – "Play". It should be hidden if video is playing and should be visible when video ends. Everything works fine, but it works only if I have one video on the page with unique ID.
HTML:
<video id="main-video" width="640" height="480">
<source src="media//mp4/video.mp4" type="video/mp4">
</video>
<span id="custom-play-button">Play</span>
And here is the JS:
window.onload = function() {
var video = document.getElementById("main-video");
var playButton = document.getElementById("custom-play-button");
playButton.addEventListener("click", function() {
document.getElementById('main-video').addEventListener('ended',myHandler,false);
video.play();
playButton.style.visibility = "hidden";
function myHandler(e) {
playButton.style.visibility = "visible";
}
});
}
But what should I do if there will be 4,5,6...100 videos on the page (and there will be)? I can't handle with 100 unique ID...
You can put every video and button in a parent div tag as below.
<div class="video-container">
<video id="main-video" width="640" height="480">
<source src="media//mp4/video.mp4" type="video/mp4">
</video>
<span id="custom-play-button">Play</span>
</div>
I'm using jQuery code, you can translate it to plain JS easily.
This should work.
$(".video-container").each(function () {
var video = $(this).find("video");
var plainVideo = video.get(0);/*DOM video object, unwrapped from jQuery*/
var playBtn = $(this).find("span");
playBtn.click(function () {
video.get(0).addEventListener('ended',myHandler,false);
plainVideo.play();
playBtn.css("visibility", "hidden");
function myHandler(e) {
playBtn.css("visibility", "visible");
}
});
});
At least this will give you an idea about the approach to this problem.
With pure Javascript (No jQuery)
You should but depend on the id, use the tag for reference, and get the nearest span. See the below code.
function closest(el, sel) {
if (el != null) return el.matches(sel) ? el : (el.querySelector(sel) || closest(el.parentNode, sel));
}
var videos = document.getElementsByTagName("video");
for (i = 0; i < videos.length; i++) {
var video = videos[i];
var playButton = closest(video, "span");
playButton.addEventListener("click", function () {
document.getElementById('main-video').addEventListener('ended', myHandler, false);
video.play();
playButton.style.visibility = "hidden";
function myHandler(e) {
playButton.style.visibility = "visible";
}
});
}
<video width="640" height="480">
<source src="media//mp4/video1.mp4" type="video/mp4">
</video>
<span class="custom-play-button">Play</span>
<video width="640" height="480">
<source src="media//mp4/video2.mp4" type="video/mp4">
</video>
<span class="custom-play-button">Play</span>
You've got to use CSS classes rather that id's and you have to use JavaScript to listen for video events and have your custom controls such as playpause button toggle. JavaScript's event.target tells you which video is doing what. MDN has a great article Creating a cross-browser video player which includes detailed instructions for custom controls for a single video.
Automated
I spent a few days creating a JavaScript that automates custom controls (Google's Material Design UI) for any number of videos on your HTML page.
The readable source code is on github at rhroyston/material-controls-for-html-video.
Fairly complex to do, but as you can see, it can be done. Live working demo is at https://hightechtele.com/articles/material-controls-for-html-video
Finally, like I said, this took me a few days. It's easy to do by hand for a single video but wanted to automate/script it. ...So view the script (and small accompanied CSS) to see how it can be done.
on an website I have a simple video player tag and a list of videos. Onclick to an element of the videolist I change the poster and src attribute of the video tag an den src and type of the source-tag inside the video tag.
This all works fine in FF and IE but it don't works in chrome.
VideoTag
<video id='video' class='video-js vjs-default-skin' controls preload='none' width='640' height='320' poster='./poster/dummy.png' data-setup='{}' preload='none'>
<source src='./video/BeHappyToBeAlive.mp4' type='video/mp4'>
<track kind='captions' src='demo.captions.vtt' srclang='en' label='English'></track><!-- Tracks need an ending tag thanks to IE9 -->
<track kind='subtitles' src='demo.captions.vtt' srclang='en' label='English'></track><!-- Tracks need an ending tag thanks to IE9 -->
Your Browser does not support video tag. Please update your Browser.
</video>
JavaScript
$(document).ready(function(){
var videoChanging = false;
function changeVideo(videoTag) {
var video = videoTag.children().first();
var src = video.children('source');
var title = video.parent().find('h3').html();
var description = video.parent().find('p').html();
var poster = video.attr('poster');
var source = video.children().first().attr('src');
var mainVideo = $('#video_html5_api');
var mainVideoBox = $('#video');
mainVideo.children('source').remove();
mainVideo.prepend(src.clone());
mainVideo.attr('poster', poster);
mainVideo.attr('src', source);
mainVideoBox.parent().find('h3').html(title);
mainVideoBox.parent().find('p').html(description);
document.getElementById('video_html5_api').load();
videoChanging = false;
setTimeout(function(){
document.getElementById('video_html5_api').play();
}, 200);
}
$('.videoListItemBox > a ').on('click', function () {
if( videoChanging ){
return;
}
document.getElementById('video_html5_api').pause();
var video = $(this);
videoChanging = true;
var changeMovieCallback = function(){ changeVideo( video ); }
var t = setTimeout(changeMovieCallback, 200);
});
});
When I add an alert to the beginn of the changeVideo(videoTag) function it will works fine in chrome.
Can somebody explain my why and give me a solution to fix this problem?
It might be the preload='none' property on your video element. But it is hard to tell - your sample is too complex. How about something simple?
<video id='video' controls width='640' height='320'>
Your Browser does not support video tag. Please update your Browser.
</video>
<div class= "videoListItemBox">
<a href="#" data-src="http://html5demos.com/assets/dizzy.mp4"
data-poster="http://lorempixel.com/640/320/">video 1</a>
<a href="#" data-src="http://techslides.com/demos/sample-videos/small.mp4"
data-poster="http://lorempixel.com/640/320/">video 2</a>
<div>
code:
$(function(){
$('.videoListItemBox > a ').on('click', function (e) {
var link = $(this);
$('#video')
.attr('poster', link.data('poster'))
.attr('src', link.data('src'))
.get(0).play();
e.preventDefault();
});
});
See this jsbin: http://jsbin.com/bamafaki/2/edit
Do note that *.mp4 files are not supported on all browsers, so you should expand your code to include *.webm files as a fallback.
This reason why the newly selected video is loading on alert message box is that it causes postback which is when the video is loaded.