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";
Related
Foe example I have this code
<input type="file" id="thefile1" accept="audio/*" />
I want to play this audio by using javascript. How can I do?
You can do this in one of two ways. Since you asked for JavaScript, you just want so set autoplay to true. The second way would be to do the same but set autoplay="true" on the video element itself.
In your case, if you don't want autoplay, you just need to run .play() on your video element.
Just to Play the Video
document.getElementById('playButton').addEventListener('click', (e) => {
const video = document.getElementsByTagName('video')[0];
video.play();
});
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<button id="playButton">Play</button>
Autoplay options
JavaScript Option
const video = document.getElementsByTagName('video')[0];
video.autoplay = true;
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
HTML Option
<video width="320" height="240" controls autoplay="true">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
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>
I am trying to play a mp4 video on my HTML page, I have searched the web and found that in HTML5 I can do this with video tag like this below
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
</video>
Issue I am facing
My main issue is my video is stored in my local computer in some location, So how can I call that from that path
In my system it is located in D drive so I want to call it from there
I am new to this so I don't know if I am doing it the right way; is my approach correct?
My requirement is to auto-play video on my web page
I am doing like this
<video width="320" height="240" autoplay>
<source src="D:\Video\samplevideo.mp4" type="video/mp4">
</video>
D:\Video\samplevideo.mp4 is the path of my file and samplevideo.mp4 is the name of the video
On Chrome it show error Not allowed to load local resource: file:///D:/Video/samplevideo.mp4
And on Firefox All candidate resources failed to load. Media load paused.
Edit
My main focus is to play video on webpage.
I need to play a video on the web (HTML page) when page is loaded I have that video in my system at D:\Video\samplevideo.mp4 this path, how can I play that video when page is loaded.
Try this Code
<video muted autoplay loop class="video video js-video" id="hero-vid" poster="video/desktop-screen-banner.png">
<source src="video/movie.webm" type="video/webm">
<source src="video/movie.mp4" type="video/mp4">
<source src="video/movie.ogg" type="video/ogg">
</video>
I can give you some pieces of advice.First,you can use the absolute path about video,place the video file on the server,then you can get a path such as www.xxx.com/movie.mp4,and you can write the code on your HTML page,like this:
<video width="320" height="240" autoplay>
<source src="www.xxx.com/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Second,you can place your video file on the directory as same as the HTML page location.For example,if your HTML page in the directory which called test.you can create a directory which called src,and you can write the code on your HTML page,like this:
<video width="320" height="240" autoplay>
<source src="./src/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Third,you can use the input tag to upload the local video file,the HTML code as below:
<input type="file" id="myInput"/>
<video controls autoplay></video>
the js code as below:
var input = document.getElementById('myInput'),
video = document.getElementById('myVideo');
input.onchange = function () {
var file = this.files[0];
var url = URL.createObjectURL(file);
video.innerHTML = '<source src="' + url + '" type="video/mp4">';
}
Fourth,use the object tag.you can write the code,like this:
//the HTML code
<div id="playhere"></div>
//js code
function play(fn){
var str='<object id="MediaPlayer" height="300" classid="CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6" style="width:70%"><param name="URL" value=\''+fn+'\'\/><param name="autoStart" value="1"\/><param name="balance" value="0"\/><param name="baseURL" value=""\/><param name="currentPosition" value="0"\/><param name="currentMarker" value="0"\/><param name="defaultFrame" value=""\/><param name="enabled" value="1"\/><param name="enableErrorDialogs" value="0"\/><param name="enableContextMenu" value="0"\/><param name="fullScreen" value="0"\/><param name="invokeURLs" value="1"\/><param name="mute" value="0"\/><param name="playCount" value="1"\/><param name="rate" value="1"\/><param name="stretchToFit" value="0"\/><param name="uiMode" value="full"\/><param name="volume" value="100"\/><param name="windowlessVideo" value="1"\/><\/object>';
document.getElementById('playhere').innerHTML=str;
}
// that's your video file location
play('D:\\Video\\samplevideo.mp4')
but that way isn't supported on chrome browser.
Excuse me,I'm new to speak English.
Can you try this
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Also follow this link for more info.
http://mrbool.com/how-to-add-and-play-videos-in-html/26171
For the very basics of getting this working move D:/Video/samplevideo.mp4 to the same location as your html file.
Then change your code to:
<video width="320" height="240" autoplay>
<source src="samplevideo.mp4" type="video/mp4">
</video>
Make sure Tomcat is set up to server the .mp4 mimetype or extention.
Next you should read up on how paths work in HTML.
you need to put an alternative text like this to check of your browser or smartphone supports video autoplay.
like this:
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
```
I am coding an HTML Website and I embedded the video successfully.
<section class="section1" id="videopage">
<video width=100%, playsinline autoplay muted loop>
<source src="Intro_BLACK.mp4" type="video/mp4"/>
</video>
</section>
This worked very well. I want to know, however, how can I link a website on this embedded video. If I click the video, I want to redirect to another webpage. I tried the below code, but it didn't work. Thanks in advance.
<section class="section1" id="videopage">
<video width=100%, playsinline autoplay muted loop>
<a href="http://www.naver.com" target="_blank">
<source src="Intro_BLACK.mp4" type="video/mp4"/>
</video>
</section>
You need to enclose the video element in the a like so:
<section class="section1" id="videopage">
<a href="http://www.naver.com" target="_blank" >
<video width="100%" playsinline autoplay muted loop >
<source src="Intro_BLACK.mp4" type="video/mp4"/>
</video>
</a>
</section>
Something really akward is happening in my code, the autoplay for audio is not working.
Basically, every website code that i put this code the music autoplays but in this one is not working.
Find the footer code:
<footer>
<ul>
<h1>
<img src="images/topoPirelli.png" alt="">
</h1>
</ul>
<audio class="audio" loop autoplay="autoplay" controls>
<source src="1.ogg" type="audio/ogg">
<source src="1.mp3" type="audio/mpeg">
</audio>
</footer>
</div>
</body>
</html>
I had the same problem.
I solved it by using jquery in the end:
$('audio').on('canplay', function() {
this.play();
});
Edit:
Nowadays I noticed a lot of browsers don't allow autoplay to work if the video sound. So a solution could be adding the muted attribute.
<video autoplay muted>
Try this:
<audio class="audio" controls autoplay>
<source src="./1.ogg" type="audio/ogg">
<source src="./1.mp3" type="audio/mpeg">
<!-- <embed height="50" width="100" src="./1.mp3"> NOT NECESSARY -->
</audio>