I'm a beginner of JavaScript. I want to play a mp4 file from a specific time for a certain time in HTML5. First, I want to load a thumbnail image. And if it is clicked, I'd like to play the video file from the particular time. This is my code. But it doesn't start from 6. It just starts from the beginning. What did I do wrong?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function PlayVideo(anchor,vid, start_time, end_time, video_file) {
document.getElementById(anchor).outerHTML =
"<video id='" + vid + "' controls width='320'> <source src='" + video_file + "'
type='video/mp4'/></video>"
var video = document.getElementById(vid);
video.play();
video.currentTime = start_time;
video.addEventListener('timeupdate', function() {
if(this.currentTime > end_time) {
this.pause();
this.currentTime = start_time;
}
});
document.getElementById(aid).style.display = "none";
}
</script>
</head>
<body>
<a id="anchor" onclick="PlayVideo('anchor','003', 5, 9, 'test.mp4');"><img src ="test.jpg" alt="trail" /></a>
</body>
</html>
try
document.getElementById(anchor).outerHTML =
"<video id='" + vid + "' controls width='320'> <source src='" + video_file + "'
type='video/mp4'/></video>";
Notice the
;
Related
<html>
<head>
<title>Doctor Page</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
window.onload = function callButtonClickEvent() {
setTimeout(function () { playSound(); }, 2000);
};
$( document ).ready(function() {
$('#source')[0].play();
});
function playSound() {
document.title = "(1) Doctor Page"
var filename = "eventually";
var mp3Source = '<source src="' + filename + '.mp3" type="audio/mpeg">';
var oggSource = '<source src="' + filename + '.ogg" type="audio/ogg">';
var embedSource = '<embed hidden="true" autostart="true" loop="false" src="' + filename + '.mp3">';
document.getElementById("sound").innerHTML = '<audio id="source">' + mp3Source + oggSource + embedSource + '</audio>';
}
</script>
</head>
<body>
<!-- Will try to play bing.mp3 or bing.ogg (depends on browser compatibility) -->
<button id="btnplay" onclick="setTimeout(function(){ playSound(); }, 500);">Play</button>
<div id="sound"></div>
</body>
</html>
You're trying to use <audio id ="source"> before creating it. Move the content of playSound to the document.ready block (before $('#source')[0].play();), and the problem is solved (I hope...).
Sorry for my English if I made mistakes.
I'm basically trying to make my buttons work for each video, the videos are generated by the loop itself, fetching the files from my server with the loop as well.
My only problem are the buttons, the videos get generated fine.
I can't seem to wrap my head around the following line, maybe there's even more than just this line I'm not doing right.
var vid[i] = document.getElementById( + [i] + "myVideo");
Am I even doing this right?
<script>
var files = <?php $out = array();
foreach (glob('../medias/aPartager/visuel/*.mp4') as $filename) {
$p = pathinfo($filename);
$out[] = $p['filename'];
}
echo json_encode($out);
?>;
var files, text, fLen, i;
fLen = files.length;
text = "";
for (i = 0; i < fLen; i++) {
text += "<a href='#video'><button onclick='playVid(" + i + ")' type='button'>Play Video</button><button onclick='pauseVid(" + i + ")' type='button'>Pause Video</button><button onclick='enableControls(" + i + ")' type='button'>Enable controls</button><button onclick='disableControls(" + i + ")' type='button'>Disable controls</button><br><video id='" + i + "myVideo' class='video' width='320' height='240' controls><source src='../medias/aPartager/visuel/" + files[i] + "' type='video/mp4'>Votre navigateur ne prend pas en charge la balise vidéo.</video></a>";
var vid[i] = document.getElementById( + [i] + "myVideo");
function playVid(i) {
vid[i].play(i);
}
function pauseVid(i) {
vid[i].pause(i);
}
function enableControls(i) {
vid[i].controls = true;
vid[i].load(i);
}
function disableControls(i) {
vid[i].controls = false;
vid[i].load(i);
}
}
text += "";
document.getElementById("lesVideos").innerHTML = text;
<script>
What it should look like
You don't put the functions for play inside the for loop. It need to be outside of the loop. Also var vid[1] is NOT valid
function playVid(id) {
let element = document.getElementById(id);
element.play();
}
function pauseVid(id) {
let element = document.getElementById(id);
element.pause();
}
<div class="video">
<button onclick="playVid('video-1')" type="button">Play Video</button>
<button onclick="pauseVid('video-1')" type="button">Pause Video</button><br>
<video id="video-1" width="320" height="176">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
<div class="video">
<button onclick="playVid('video-2')" type="button">Play Video</button>
<button onclick="pauseVid('video-2')" type="button">Pause Video</button><br>
<video id="video-2" width="320" height="176">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
OR other option
let videoMap = {}
for (i = 0; i < fLen; i++) {
// Generate HTML first
// Add the video to videoMap and cache it
videoMap[i] = document.getElementById(i);
}
then AFTER the loop finishes to make it all work.
function playVid(id) {
videoList[id].play();
}
function pauseVid(id) {
videoList[id].pause();
}
HTML: I set the button onclick "myFunction" Now I would like images to be displayed onclick
<body>
<p>Click the button to see some images</p>
<button onclick="myFunction()">See the Images!!!</button>
<script src="js2/images.js">
</script>
</body>
JS: Need to display images onclick...Not sure if i am on the right track as I am a beginner at JS...I cant seem to get the images to display, only the src name of the images....
function myFunction() {
pge = new Array ()
pge[4] = "../images/sky3.jpg"
pge[3] = "../images/sky8.jpg"
pge[2] = "../images/sky7.jpg"
pge[5] = "../images/sky6.jpg"
pge[0] = "../images/sky5.jpg"
pge[1]= "../images/sky4.jpg"
pge[6] = "../images/sky1.jpg"
pge[7] = "../images/sky2.jpg"
for (i=0;i<=pge.length-1;i++) {
var img = document.createElement("img");
????????
}
}
Add line
img.setAttribute("src", pge[i]);
in your ?????? part
Something like this should do the trick. (in part based on How to display image with javascript?)
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<p>Click the button to see some images</p>
<button onclick="myFunction()">See the Images!!!</button>
<script>
function show_image(src, width, height, alt) {
var img = document.createElement("img");
img.src = src;
img.width = width;
img.height = height;
img.alt = alt;
// This next line will just add it to the <body> tag
document.body.appendChild(img);
}
function myFunction() {
var pge = ["http://www.w3schools.com/graphics/pic_the_scream.jpg", "http://www.w3schools.com/images/colorpicker.gif"];
for(var i = 0; i < pge.length; i++){
show_image(pge[i], 100, 200, i)
}
}
</script>
</body>
</html
Your HTML needs a place to display the images when the button is clicked. You can use CSS to style the div.
<body>
<p>Click the button to see some images</p>
<button onclick="myFunction()">See the Images!!!</button>
<div id="showImg"></div>
<script src="js2/images.js"></script>
</body>
You don’t have to use the Array constructor. Store your images in an array as shown below, use a for-loop to loop through the array, then use the innerHTML property to create img tags, locate your images and display them. You can use CSS to style the images.
var pge = ["sky3.jpg", "sky8.jpg", "sky7.jpg", "sky6.jpg", "sky5.jpg", "sky4.jpg", "sky1.jpg", "sky2.jpg"];
var showImg = document.getElementById("showImg");
var myFunction = function(){
for(var i = 0; i < pge.length; i++)
{
showImg.innerHTML = "<img src='images/" + pge[0] + "'/> <img src='images/" + pge[1] + "'/> <img src='images/" + pge[2] + "'/> <img src='images/" + pge[3] + "'/> <img src='images/" + pge[4] + "'/> <img src='images/" + pge[5] + "'/> <img src='images/" + pge[6] + "'/> <img src='images/" + pge[7] + "'/>";
}
}
I uploaded videos to the server and saved the videopath and imagepath into the database. Now I want to show the video lists on my homepage. I wrote the code, the player for streaming the video is appeared but not the list of the videos.
the codes are -
C# Code Behind -
[WebMethod]
public static List<Video> loadVideo(string value)
{
IList<Video> video = VideoManager.GetHomePageVideo();
if (video == null)
{
video = new List<Video>();
}
return video.ToList();
}
And the HTML and JavaScript Code for -
PageMethods.loadVideo('', loadVideoSuccess);
function loadVideoSuccess(result) {
$("#dvVideo").html('');
var html = '';
for (var i = 0; i < result.length; i++) {
html += "<div style=\" border: solid 1px gray;\">";
html += "<a style=\"cursor: pointer;\" onclick=\"LoadVideo('" + result[i].VideoPath.split('/')[1] + "');\"><img src=\"" + result[i].ImagePath + "\" width=\"70\" style=\"background-color:black;\" />" + resul[i].Title + "</a>";
//html += " :: <a href=\"Pages/Gallery/Videos.aspx?videoId=" + result[i].ID + " " + result[i].Title + </a>;
html += "</div>";
}
$("#dvVideo").append(html);
}
<div class="widget-main">
<div class="widget-main-title">
<h4 class="widget-title">Latest Videos</h4>
</div>
<div class="widget-inner" id="dvVideo">
<div style="">
<div id="myElement">Loading the player...</div>
</div>
</div>
<script type="text/javascript">
jwplayer("myElement").setup({
file: "Uploads/Ar_Rahman_Edited.mp3",
image: "video/RoboCop.jpg",
height: 320,
width: 332,
skin: "jwplayer-skins/six.xml"
});
function loadVideo(file) {
var filename = 'Uploads/' + file;
jwplayer("myElement").setup({
file: filename,
image: "video/RoboCop.jpg",
height: 320,
width: 332,
autostart: true,
skin: "jwplayer-skins/six.xml"
});
}
</script>
</div>
Now please help me why it is not showing the video list on my homepage ? What should I do for it?
Please try the link below and try that way and please don't try mix and mess up html and javascript together. Keep both separate.
//http://jsfiddle.net/ramp/nF7Mw/
I am making a video website and so far I haven't styled it much yet so it's just videos on a blank page.
I have made it so that videos don't buffer until you click the thumbnail on the page. I added code to pause the video when you click it while it's playing and also play it again when it's clicked again.
I set it so the controls show on the HTML video but there's one problem. When you click on the video itself to pause it works fine, but when you click anything on the controls bar at the bottom it also pauses. And on top of that when you click the play/pause button on the actually control bar, the button pauses the video but it then instantly starts playing again because my function for playing when video is clicked fires.
How can I make it so the on click events don't work on the controls bar?
Another issue also is that when in fullscreen, the click on video to pause feature doesn't work at all. How do I fix that? I know that's quite a few questions in one post. Sorry :D
I looked everywhere and couldn't find answers. Heres my HTML and my JavaScript. The website is here: https://googledrive.com/host/0BxOngeQ9zGOeeHdlS3YyUFluVkk/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Project Bluebar</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="javascript/vidloader.js"></script>
</head>
<body>
<noscript><h1>JavaScript is disabled! The page will not function properly.</h1><br><br></noscript>
<div id="1"><br><br><img class="video" onclick="vidcl('media/1.mp4', 'media/1.png', '1', '480', '480', 'i1', 'media/1mo.png');" id="i1" onmouseover="thumbch('i1', 'media/1mo.png');" onmouseout="thumbak('i1', 'media/1.png');" src="media/1.png" width="480" height="480"></div>
<div id="2"><br><br><img class="video" onclick="vidcl('media/2.mp4', 'media/2.png', '2', '640', '480', 'i2', 'media/2mo.png');" id="i2" onmouseover="thumbch('i2', 'media/2mo.png');" onmouseout="thumbak('i2', 'media/2.png');" src="media/2.png" width="640" height="480"></div>
<div id="3"><br><br><img class="video" onclick="vidcl('media/3.mp4', 'media/3.png', '3', '360', '360', 'i3', 'media/3mo.png');" id="i3" onmouseover="thumbch('i3', 'media/3mo.png');" onmouseout="thumbak('i3', 'media/3.png');" src="media/3.png" width="360" height="360"></div>
<div id="4"><br><br><img class="video" onclick="vidcl('media/4.mp4', 'media/4.png', '4', '400', '300', 'i4', 'media/4mo.png');" id="i4" onmouseover="thumbch('i4', 'media/4mo.png');" onmouseout="thumbak('i4', 'media/4.png');" src="media/4.png" width="400" height="300"></div>
</body>
</html>
and the JavaScript
var cs;
var no;
for(var x = 1; x < 5; x++){
no = x.toString();
cs = 'img' + no + ' = new Image(); img' + no + ".src = 'media/" + no + "mo.png';";
eval(cs);
}
var video;
var imgm;
var vidm;
var idm = '';
var widm;
var heim;
var imidm;
var hovimm;
function cla(){
video = document.getElementById('av');
if(video.paused){
video.play();
}else{
video.pause();
}
};
function vidcl(vid, img, id, wid, hei, imid, hovim){
if(idm !== ''){
document.getElementById(idm).innerHTML = '<br><br><img class="video" onclick="' + "vidcl('" + vidm + "', '" + imgm + "', '" + idm + "', '" + widm + "', '" +heim + "', '" + imidm + "', '" + hovimm + "');" + '" id="' + imidm + '" onmouseover="thumbch(' + "'" + imidm + "', '" + hovimm + "');" + '" onmouseout="thumbak(' + "'" + imidm + "', '" + imgm + "');" + '" src="' + imgm + '" width="' + widm + '" height="' + heim + '">';
}
vidm = vid;
imgm = img;
idm = id;
widm = wid;
heim = hei;
imidm = imid;
hovimm = hovim;
window.location.hash = id;
document.getElementById(id).innerHTML = '<br><br><video id="av" class="video" ondblclick="fs();" onclick="cla();" src="' + vid + '" width="' + wid + '" height="' + hei + '" autoplay loop controls>';
};
window.onkeydown = function(event){
video = document.getElementById('av');
if(event.keyCode === 32){
event.preventDefault();
if(video.paused){
video.play();
}else{
video.pause();
}
}
};
function thumbch(id, ims){
document.getElementById(id).src = ims;
};
function thumbak(id, ims){
document.getElementById(id).src = ims;
};
function fs(){
video = document.getElementById('av');
if(video.requestFullScreen){
video.requestFullScreen();
}else if(video.msRequestFullScreen){
video.msRequestFullScreen();
}else if(video.mozRequestFullScreen){
video.mozRequestFullScreen();
}else if(video.webkitRequestFullScreen){
video.webkitRequestFullScreen();
}
};
I figured it out myself. I disabled the default video controls and the context menu so that they the controls can't be re-enabled through it and I made my own controls.