Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 days ago.
Improve this question
I have 3 mp4s and I need to play one at random automatically. I'm having trouble making it happen and I've searched around for a solution but to no avail.
Here's what I have so far
<script>
var videos = ["video1.mp4", "video2.mp4", "video3.mp4"];
var currentVideo = 0;
document.getElementById("bg-video").addEventListener("ended", function() {
currentVideo = (currentVideo + 1) % videos.length;
this.src = videos[currentVideo];
this.play();
});
setInterval(function() {
var video = document.getElementById("bg-video");
video.src = videos[currentVideo];
video.play();
}, 3000);
</script>
#video_player {
width: 20%;
height: auto;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>The video autoplay attribute</h1>
<video width="320" height="240" autoplay loop muted>
<source src="v1.mp4" type="video/mp4">
<source src="v2.mp4" type="video/mp4">
<source src="v3.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 months ago.
Improve this question
Searching for a code which can help me to solve above question using only HTML,css,javascript.
It would help me a lot,Thanks in advance.
set urlPath is a path of your video store in argument of changeSrc function:
const video = document.querySelector('#video')
const source = document.querySelector('#source')
function changeSrc(urlPath) {
video.pause();
source.setAttribute('src', urlPath);
source.setAttribute('type', 'video/mp4');
video.load();
video.play();
}
div {
display: flex;
flex-direction: column;
}
button{
width: 200px
}
<div>
<button onclick="changeSrc('https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4')">Click to change video</button>
<video id="video" width="320" height="240" controls autoplay>
<source id= "source" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type="video/mp4">
</video>
</div>
i hope this would helps you a lot.
function loadTheVideo()
{
//alert(URL.createObjectURL(document.getElementById("file").files[0]));
document.getElementById("video").src = URL.createObjectURL(document.getElementById("file").files[0]);
document.getElementById("video").play();
}
video
{
width: 400px;
height: 400px;
border: 1px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<video controls id="video"></video>
<br>
<input onchange="loadTheVideo()" type="file" id="file" name="file">
</body>
</html>
Is it possible to set a video to full screen on page load?
So far, the only answer I could get to work and was actually logical to me was setting the width and height on the element via CSS.
var $pop = Popcorn("#video");
$pop.play();
console.dir( $pop )
html{font-family:arial;}
#video{width:100%;height:100%;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<video height="180" width="300" id="video" controls>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"></source>
</video>
I use Popcorn.js for playing the video on startup.
I am aware of setting CSS classes from JavaScript. The thing I'm more interested in would be the question: is there is a JavaScript based method to call, to maximize the video to full screen (on startup).
Using JavaScript, as suggested by Will, I also can't seem to get it to work properly
var video = $("#video");
var vid = video[0];
vid.play();
if (vid.requestFullscreen) {
vid.requestFullscreen();
} else if (vid.mozRequestFullScreen) {
vid.mozRequestFullScreen();
} else if (vid.webkitRequestFullscreen) {
vid.webkitRequestFullscreen();
}
html{font-family:arial;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<video height="180" width="300" id="video" controls>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.mp4"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.ogv"></source>
<source src="http://videos.mozilla.org/serv/webmademovies/popcornplug.webm"></source>
</video>
I have a few lines of Javascript that define a custom 'play' button for HTML5 video.
The issue I have is that they work fine for one video, and for one video only. I want to have several videos on my page with the same Javascipt code affecting all of them. So that the play button works individually on each video. At the moment it only works on the first video listed in HTML.
How do I make this work?
JS
var vid, playbtn;
function intializePLayer(){
vid = document.getElementById("my_video");
playbtn = document.getElementById("playpausebtn");
playbtn.addEventListener("click",playPause,false);
}
window.onload = intializePLayer;
function playPause(){
if(vid.paused){
vid.play();
playbtn.style.opacity = '0';
}else{
vid.pause();
playbtn.style.background = "url('http://i61.tinypic.com/xm8qdu.png')";
playbtn.style.backgroundSize = "105px 105px";
playbtn.style.opacity = '1';
}
}
CSS
#video_container{
position:relative;
width:480px;
height:264px;
}
button#playpausebtn{
background:url('http://i61.tinypic.com/xm8qdu.png') no-repeat;
position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin:auto;
border:none;
outline:none;
width:105px;
height:105px;
cursor:pointer;
background-size: 105px 105px;
}
HTML
<!-- Video #1 -->
<div id="video_container">
<button id="playpausebtn"></button>
<video id="my_video" width="480" loop>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</div>
<!-- Video #2 -->
<div id="video_container">
<button id="playpausebtn"></button>
<video id="my_video" width="480" loop>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</div>
This approach will help you have one->n videos. In the fiddle we first search the DOM for elements with a class name of playpausebtn, then add an onclick listener for each. This listener takes the video object (which has to be directly after the button in this case, you could change this code to use an incrementing id e.g. video_1, video_2 etc and find the video objects that way) and adds it to the onclick event listener.
This is only one approach, but it is a way to resolve your issues - please ask questions if there is anything you don't understand.
http://jsfiddle.net/tL5ZU/1/
HTML:
<!-- Video #1 -->
<div>
<button class="playpausebtn">Play</button>
<video width="480" loop>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
</video>
</div>
<!-- Video #2 -->
<div>
<button class="playpausebtn">Play</button>
<video width="480" loop>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
</video>
</div>
JS
//set up listeners for buttons
function init() {
//get all buttons
var buttons = document.getElementsByClassName('playpausebtn');
//for each button set up the onclick listener
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = (function () {
//the video needs to be right after the button
var video = buttons[i].nextSibling.nextSibling;
return function () {
if (video.paused) {
video.play();
} else {
video.pause();
}
};
})();
}
}
init();
I am trying to play a .ogg file which i also converted into a .mp3 file
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<body onclick = "playSound('file:///C:/Users/Rehaan/Downloads/myfirstrecording%20(3).ogg');">
<p id = "sound">
</p>
Click here to play the sound!
</body>
</html>
This is the java script file,
function playSound( url ){
document.getElementById("sound").innerHTML="<embed src='"+url+"' hidden=true autostart=true loop=false>";
}
I would recommend using the HTML5 audio tag.
<audio id="audio_samples" src="mymp3audiofile.mp3" controls></audio>
The audio tag supports mp3, ogg, and wav audio files.
Also, here are Javascript audio control functions that you may find useful:
<script type="text/javascript">
var audio = document.getElementById("audio_samples");
function playAudio() {
audio.play();
}
function pauseAudio() {
audio.pause();
}
function restartAudio() {
audio.load();
audio.play();
}
function louder() {
audio.volume += 0.1;
}
function softer() {
audio.volume -= 0.1;
}
</script>
<button onclick="playAudio()">Play</button>
<button onclick="pauseAudio()">Pause</button>
<button onclick="restartAudio()">Restart</button>
<button onclick="louder()">Louder</button>
<button onclick="softer()">Softer</button>
I hope this helps!
You can use HTML5 Tag which is <audio>. It can play .mp3, .ogg, .wav format.
This is an example that I got from w3schools.
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
Greetings overflow,
I'm trying to create buttons on a webpage that jump to tagged timestamps for an embedded video with video-js. Far as I can gather, I need to change the currentTime value in order to have the video move to the correct timestamp, however I can't get this to work even when setting currentTime in the initial javascript call.
For example, if I wanted to start 200 seconds into the video:
javascript:
VideoJS.setupAllWhenReady();
VideoJS.DOMReady(function(){
var myPlayer = VideoJS.setup("current_video");
myPlayer.play();
myPlayer.currentTime(200);
});
HTML Snip:
<video id="current_video" class="video-js" width="400" height="300" controls="controls" preload="auto" poster="./videoposter.png">
<source src="./videosource.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>
Again, the video plays properly using the video-js player, just the currentTime offset doesn't seem to be applied and the video starts from the beginning. I've tested this in chrome, safari, IE and they all seem to do the same thing so I don't think the problem is browser specific. I must be doing something wrong...
Thanks for your help!
Remove the "VideoJS.setupAllWhenReady();" and it should work. This is what I have:
<!DOCTYPE html>
<html>
<head>
<title>Sample styled page</title>
<script src="video-js/video.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="video-js/video-js.css" type="text/css" media="screen" title="Video JS" charset="utf-8">
</head>
<body>
<h1>Sample styled page</h1>
<p>This page is just a demo.</p>
<video id="current_video" class="video-js" width="400" height="300" controls="controls" preload="auto">
<source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>
<script>
//VideoJS.setupAllWhenReady();
VideoJS.DOMReady(function() {
var myPlayer = VideoJS.setup("current_video");
myPlayer.play();
myPlayer.currentTime(200);
});
</script>
</body>
</html>
$(function(){
var myPlayer = _V_("my_video_1");
_V_("my_video_1").ready(function(){
myPlayer.src([
{ type: "video/mp4", src: "http://video-js.zencoder.com/oceans-clip.mp4" },
{ type: "video/webm", src: "http://video-js.zencoder.com/oceans-clip.webm" }
]);
});
});
$(window).load(function(){
var myPlayer = _V_("my_video_1");
myPlayer.currentTime(30);
myPlayer.play()
});