We Keep Coding

Can't disable controls in a youtube video

I am running a content.js on a youtube page and i want it to disable the controls of the youtube video. I am getting the video by video=document.querySelector('video'); and when trying to do: video.controls=false; it does'nt work. Would love some help
here is the video tag when I run the code on youtube's console:

let video = document.getElementById('vid');
video.removeAttribute('controls')
<div style="display:flex;flex-direction:column">
Vid 1 :
<video id="vid" controls>
<source src="#" />
</video>
Vid 2 :
<video id="vid2" controls>
<source src="#" />
</video>
</div>
See this post, on your <video> tag, you dont want to put controls if you don't want them
quick example :
<video width="400px" height="400px" controls> // this will show controls
<source src="link" />
</video>
<video width="400px" height="400px"> // this won't show controls
<source src="link" />
</video>

I've used #wOxxOm advice and figured out how to hide the play button and the timeline bar.
Here is the used code:
playButton=document.getElementsByClassName("ytp-play-button ytp-button")[0];
bar=document.getElementsByClassName("ytp-progress-bar-container")[0];
playButton.style.display="none";
bar.style.display="none";

Force video to play before poster loads

On firefox the poster image completely loads before video starts. Is it possible to force it to play video first with either pure JS or jquery? Doesn't matter if it stops to buffer, i just don't want to see the poster first.
Using standard code:
<video class="myvideo" width="500" height="700" poster="" autoplay muted>
<source src="" type="video/webm">
</video>
Super easy fix just needed a preload="none"

You could try to play the video per JavaScript when it has been loaded. To do that, you will have to add an id to the video.
<video id="myivdeo" class="myvideo" width="500" height="700" poster="" autoplay muted onload="javascript:this.play();">
<source src="" type="video/webm">
</video>
~ MarvMan

Just needed to include preload="none".
<video class="myvideo" width="500" height="700" autoplay muted preload="none" poster="" >
<source src="" type="video/webm">
</video>

Turn on close caption for HTML5 Video

How to enable default close caption for HTML5 Video
I tried this
<video id="video" src="abc.mp4">
<track src="web.vtt" srclang="en" label="English" kind="subtitles" default=""></track>
</video>

You need to use a <source> element or the inner of your <video> element will be ignored :
<video controls>
<source type="video/mp4" src="http://vjs.zencdn.net/v/oceans.mp4" />
<track src="http://www.videojs.com/vtt/captions.vtt" srclang="en" label="English" kind="subtitles" default=""></track>
</video>
Video and captions taken from video.js

Pause a Videojs on Slick carousel

2I need some help, I'm using several videojs html players on slick slider sycing carousel. My problem is when I click on other carousel thumbnail to go to the other video the first video keeps playing. I'd like to pause any video on click any thumbnail.
My html is:
<div class="slider-for">
<div class="video-wrap">
<video id="example_video_1" class="video-js vjs-sublime-skin vjs-big-play-centered"
controls preload="auto" width="auto" height="auto"
poster="images/video/cover-video2.png"
data-setup='{}'>
<source src="images/video/Kalima2.mp4" type='video/mp4' />
<source src="images/video/Kalima2.webm" type='video/webm' />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
</div>
<div class="video-wrap">
<video id="example_video_2" class="video-js vjs-sublime-skin vjs-big-play-centered"
controls preload="auto" width="auto" height="auto"
poster="images/video/cover-video1.jpg"
data-setup='{}'>
<source src="images/video/Kalima1.mp4" type='video/mp4' />
<source src="images/video/Kalima1.webm" type='video/webm' />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
</div>
<div class="video-wrap">
<video id="example_video_3" class="video-js vjs-sublime-skin vjs-big-play-centered"
controls preload="auto" width="auto" height="auto"
poster="images/video/cover-video-students.jpg"
data-setup='{}'>
<source src="images/video/Students.mp4" type='video/mp4' />
<source src="images/video/Students.webm" type='video/webm' />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
</div>
<div class="video-wrap">
<video id="example_video_4" class="video-js vjs-sublime-skin vjs-big-play-centered"
controls preload="auto" width="auto" height="auto"
poster="images/video/cover-video3.jpg"
data-setup='{}'>
<source src="images/video/Kalima3.mp4" type='video/mp4' />
<source src="images/video/Kalima3.webm" type='video/webm' />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
</div>
<div class="video-wrap">
<video id="example_video_5" class="video-js vjs-sublime-skin vjs-big-play-centered"
controls preload="auto" width="auto" height="auto"
poster="images/video/cover-video-students2.jpg"
data-setup='{}'>
<source src="images/video/Students2.mp4" type='video/mp4' />
<source src="images/video/Students2.webm" type='video/webm' />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
</div>
</div>
<div class="video-thumb">
<div><div id="thumb"><img src="images/video/video2.png"></div></div>
<div><div id="thumb"><img src="images/video/video1.png"></div></div>
<div><div id="thumb"><img src="images/video/video3.png"></div></div>
<div><div id="thumb"><img src="images/video/video4.png"></div></div>
<div><div id="thumb"><img src="images/video/video5.png"></div></div>
</div>
I find this js:
_V_("example_video_1").ready(function(){
var player = this;
var pausebutton = document.getElementById("thumb");
pausebutton.onclick = function(event) {
player.pause();
};
});
With this function I can pause only the first video, I'd like some help for a function when I click on single thumbnail I could pause any playing video and it should to work for all thumbnails too. Someone could help me?

The main issue you are having is that you have several video tags with the same ID: "example_video_1".
I suggest giving each video tag their own ID. Then you'll be able to access them individually.

HTML5 video.js Player error with subtitles

I am trying to write a basic video player using html5 video tag. I used Video.js as my JavaScript. I want to play a video with its caption.
Here is the code:
<!DOCTYPE html>
<link href="path/to/video-js.css" rel="stylesheet">
<script src="path/to/video.js"></script>
<script>
videojs.options.flash.swf = "path/to/video-js.swf"
</script>
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
<source src="m.mp4" type='video/mp4' />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
<track src="m.srt" kind="subtitles" srclang="en" label="English" default>
<track src="m.vtt" kind="subtitles" srclang="en" label="English" >
<track src="m.srt" kind="captions" srclang="en" label="English" >
<track src="m.vtt" kind="captions" srclang="en" label="English" >
</video>
When I open this file in my browser, I see a "cc" label that must enable/disable captions; but it doesn't work at all. VLC media palyer can play the video and caption well; so there is no error in source files.
Can any body help me?