I'm creating an HTML5 video player, and want a button that turns subtitles on and off. To switch them off, I'm setting the default track's "mode" attribute to "hidden", but they're not disappearing in Chrome 66.
Here's the line of jQuery that should turn subtitles off (the player's id is "player"):
$"#player track").eq(0).attr("mode", "hidden");
The "mode" attribute changes to "hidden" in the DOM, but the subtitles are still visible. Any idea why that would be?
Expanding upon my comment; what you should try is disable the subtitles on all tracks (in case you have more than one).
There might be an easier way using jQuery, however I have never worked with html5 player using jQuery hence my answer.
var video = document.querySelector('#player');
for (var i = 0; i < video.textTracks.length; i++) {
video.textTracks[i].mode = 'hidden';
}
$(".ccbutton").click(function(){
var video = document.querySelector('#video');
for (var i = 0; i < video.textTracks.length; i++) {
if(video.textTracks[i].mode == 'hidden')
video.textTracks[i].mode = 'showing';
else
video.textTracks[i].mode = 'hidden';
}
});
Related
I have a main page and a canvas element under it (like in agar.io) and I hide my interface and show the canvas when the game begins:
const mainpage = document.getElementById('mainpageID');
const mainpage_elems = mainpage.getElementsByTagName("*");
for (let i = 0; i < mainpage_elems.length; i++) {
const element = mainpage_elems[i];
element.style.display = "none";
}
Will this also help optimize my website so that browser will be running my game faster? Because it knows that all of my other elements are hidden so it can focus on painting canvas. Is that true?
I need to include some sound files on a website, i recorded them and used the super complicated:
<a href="seo.html" onmouseover="new Audio('sounds/seo.mp3').play()">
to play them when the user scrolls over with the mouse. There are a total of four links on the website.
The problem is, when i mouse over one of them it starts playing, and then if i mouse over another it plays that one as well. If i move the mouse really fast accross the links i end up getting Giberish because all files are being played at the same time. How do i stop this ??
Ideal would be that the others CANNOT be played until the current playing is finished :)
An approch below.
Note, untested ;-)
HTML
a sound link -
a sound link -
a sound link -
a sound link
JS
var links = document.querySelectorAll('a.onmousesound');
var currentPlayedAudioInstance = null;
var onHoverPlaySound = function(element) {
if (currentPlayedAudioInstance &&
currentPlayedAudioInstance instanceof Audio) {
// is playing ?
// http://stackoverflow.com/questions/8029391/how-can-i-tell-if-an-html5-audio-element-is-playing-with-javascript
if (!currentPlayedAudioInstance.paused && !currentPlayedAudioInstance.ended && 0 < currentPlayedAudioInstance.currentTime) {
return false;
}
}
var file = element.getAttribute('data-file');
currentPlayedAudioInstance = new Audio(file);
currentPlayedAudioInstance.play();
};
for (var i = 0; i < links.length; i++) {
link.addEventListene('onmouseover', function() {
onHoverPlaySound(links[i]);
});
};
I am adding youtube video link in my web application using following JavaScript code.
This is working Fine.
But when Video finishes by default youtube video gives other links divided in small square boxes, I dont want this.
When video finishes then black screen should appear or whatever is the end screen there in video should appear.
Can we do this? If yes then how?
youtubeLoadVideos : function () {
var videos = document.getElementsByClassName("youtube");
for (var i=0; i<videos.length; i++) {
var youtube = videos[i];
var iframe = document.createElement("iframe");
iframe.setAttribute("src", "http://www.youtube.com/embed/" + youtube.id);
// The height and width of the iFrame should be the same as parent
iframe.style.width = youtube.style.width;
iframe.style.height = youtube.style.height;
iframe.style.clear = 'both';
youtube.parentNode.appendChild(iframe, youtube);
//youtube.appendChild(youtube.id);
}
}
iframe.setAttribute("src", "http://www.youtube.com/embed/" + youtube.id + "?rel=0");
Just add ?rel=0 to your URL, or disable "Show suggested videos when the video finishes"
Since Firefox doesn't allow me to use an .mp4 file in the <video>-tag, I have to use the Flash-fallback on my VideoJS player.
For Chrome, Safari and IE, I can configure my VideoJS player with javascript to do pretty much anything. For example I like to loop it 5 times, hide the controls and mute the video. No issue there for the HTML5 version:
// Initialize the video with some settings
videojs(videoID, {
"controls": false,
"autoplay": false,
"preload": "auto",
});
var myVideo = videojs(videoID);
// Set the counter
var loop_count = 1;
// Function to loop the video exaclty 5 times
var loopInstagramVideo = function() {
if (loop_count <= 5) {
myVideo.play();
loop_count++;
} else {
loop_count = 1;
}
};
// Function to manipulatie the playing video (mute, no controls,...)
var setVideoOptions = function() {
myVideo.muted(1);
myVideo.controls(0);
};
// Set functions on the video
myVideo.on("play", setVideoOptions);
myVideo.on("ended", loopInstagramVideo);
So I would like to do the same for the Flash version.
The code above is generating an error on the videojs-call with the error:
TypeError: The element or ID supplied is not valid. (videojs)
Any thoughts on how to tackle this issue?
While this isn't an answer for your "looping" question, I just myself discovered that after calling videojs() on an element, the ID changes. Whether it's the ID of the element changes or the focus of the videojs call changes I don't know. The error pertaining to the ID not being valid is being caused by your first and second videojs() calls.
I would change this:
videojs(videoID, {
"controls": false,
"autoplay": false,
"preload": "auto",
});
var myVideo = videojs(videoID);
To this:
var myVideo = videojs(videoID);
myVideo.controls = false;
myVideo.autoplay = false;
myVideo.preload = "auto";
OR put those properties in the video tag itself.
I'm using this solution, http://daverupert.com/2012/05/making-video-js-fluid-for-rwd/, to make the videojs player fluid. My problem is when I have multiple videos (each with a unique id), I'm not sure how to make this work.
Here is my dev site I have 3 videos on, http://tweedee.e-mediaresources.info/
Here is the code I have for the player (from Dave Rupert's solution above):
<script type="text/javascript">
// Once the video is ready
_V_('#my_video_1').ready(function(){
var myPlayer = this; // Store the video object
var aspectRatio = 9/16; // Make up an aspect ratio
function resizeVideoJS(){
// Get the parent element's actual width
var width = document.getElementById(myPlayer.id).parentElement.offsetWidth;
// Set width to fill parent element, Set height
myPlayer.width(width).height( width * aspectRatio );
}
resizeVideoJS(); // Initialize the function
window.onresize = resizeVideoJS; // Call the function on resize
});
</script>
This code works fine for one video, but how do I do multiple ids??? As you can see in my dev site, I just replicated the script above three times (each with a different id) and that only causes the last video to be fluid.
you overwrite window.onresize() each time, so only the last one is used.
replace
window.onresize = resizeVideoJS
with :
window.addEventListener("resize", resizeVideoJS, false); // all browsers except IE before version 9
The following works. It does involve a bit of repetition, which I think you might be able to avoid if you used something like jQuery's deferred object to wait until the ready event is fired for all of the video players, but it's a lot neater than duplicating the resize method as you're currently doing:
<script type="text/javascript">
var players = ['my_video_1', 'my_video_2', 'my_video_3'];
var aspectRatio = 9/16;
// Catch each of the player's ready events and resize them individually
// jQuery deferred might be a neater way to wait for ready on all components to load and avoid a bit of repetition
for (var i = 0; i < players.length; i ++) {
_V_('#' + players[i]).ready(function() {
resizeVideoJS(this);
});
}
// Loop through all the players and resize them
function resizeVideos() {
for (var i = 0; i < players.length; i ++) {
var player = _V_('#' + players[i]);
resizeVideoJS(player);
}
}
// Resize a single player
function resizeVideoJS(player){
// Get the parent element's actual width
var width = document.getElementById(player.id).parentElement.offsetWidth;
// Set width to fill parent element, Set height
player.width(width).height( width * aspectRatio );
}
window.onresize = resizeVideos;
</script>
// jQuery deferred might be a neater way to wait for ready
// on all components to load and avoid a bit of repetition
for (var i = 0; i < players.length; i ++) {
_V_('#' + players[i]).ready(function() {
resizeVideoJS(this);
});
}
// Loop through all the players and resize them
function resizeVideos() {
for (var i = 0; i < players.length; i ++) {
var player = _V_('#' + players[i]);
resizeVideoJS(player);
}
}
// Resize a single player
function resizeVideoJS(player){
// Get the parent element's actual width
var width = document.getElementById(player.id).parentElement.offsetWidth;
// Set width to fill parent element, Set height
player.width(width).height( width * aspectRatio );
}
window.onresize = resizeVideos;
I have slightly modified net.uk.sweet's very helpful answer above into a working script which deals with multiple video players using video js - which are also responsive. You can find my article (which also shows an example) here = http://www.andy-howard.com/videojsmultipleresponsivevideos/index.html
This also includes a provided callback function if you require it.
you can use css rather than javascript :
.wrapper {
width: 100%;
}
.video-js {
padding-top: 55.25%;
}
<div class="wrapper">
<video id="video-player" width="auto" height="auto" class="video-js vjs-default-skin vjs-big-play-centered" data-setup="{}">
</video>
</div>