Jump to content

Search the Community

Showing results for tags 'Video'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








  1. Hey, I wanted to insert a video on a page. I used the video code from w3schools for this but it only shows me the black screen. I used the following code. <video width="480" height="360" controls> <source src="video model.mp4" type="video/mp4"> Your browser does not support the video tag. </video>
  2. I have set my page frame 1t 1920 by 1080 and want my video to fill that space. When I input my responsive HTML video code into a 1920 by 1080 frame with: width:100%;height:100%, the control bar is too small. (Image1) When I activate the full screen button, the control bar appears at the proper size. (Image 2) Is there a way to have the embed code automatically open with the "full screen" button activated? <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/XXXXXX330?title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script> This image has 100% responsive image at 1920 by 1080 container. Second image has same code and frame size, after fullscreen button is activated.
  3. Attention: W3Schools Forums members: I have a web page with numerous ".mp4" videos on it. Lately, I have noticed that when I click on the hyperlink for one video, it will play, but after that, when I click on other video hyperlinks, those videos will not play. Can you tell me why this is happening? Thank you ( see Colossians 3:15, for example ) for your help and your patience. Keep in touch. 🙂 Sincerely in Christ, Russell E. Willis P.S. - Please read Proverbs 23:23.
  4. I am trying to use a video background (Vimeo iframe) in a DIV, but I cannot get it to fill out the DIV as I want to save my life. I am working from an HTML template and I am an intermediate user at the most. here is a screen capture of what it is doing at the moment when I scale the browser window to check responsiveness: DIV scaling. (the video content almost looks like a still picture, but it's in fact a moving video) What I am trying to do is: The video should be locked to the bottom right corner of the DIV. The left OR the top side of the video should be cropped, depending on the aspect ratio of the DIV. Why am I not getting this? I first thought that it might not be such a big deal, but it just won't work. could anybody help me with this? here is the HTML of the DIV: <div class="imageblock__content videobg col-lg-6 col-md-4 pos-right" data-overlay="0"> <iframe src="https://player.vimeo.com/video/372864200?background=1" style="position:relative;right:0%;bottom:0%;width: 120%; overflow:hidden" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe> <div class="background-image-holder"> <img alt="image" src="img/wedding-5.jpg"> </div> </div> and here are all the relevant CSS calls: .videobg .container, .videobg .background-image-holder { opacity: 0; transition: 0.3s linear; -webkit-transition: 0.3s linear; -moz-transition: 0.3s linear; } .videobg .background-image-holder { opacity: 0 !important; } .videobg.video-active .container { opacity: 1; } .videobg.video-active .loading-indicator { opacity: 0; visibility: hidden; } .videobg video { object-fit: cover; height: 100%; min-width: 100%; position: absolute; top: 0; z-index: 0 !important; left: 0; } @media all and (max-width: 1024px) { .videobg .background-image-holder, .videobg .container { opacity: 1 !important; } .videobg .loading-indicator { display: none; } .videobg video { display: none; } } .imageblock .imageblock__content { position: absolute; height: 100%; top: 0; z-index: 2; padding: 0; } .col-lg-6 { flex: 0 0 50%; max-width: 50%; } .col-md-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } .pos-right { right: 0; }
  5. Hey, Im having an issue that I have no idea how to resolve. I followed the instructions here for how to make a full video page and added links in the content section. However my video is being cropped and I dont know how to fix that. I dont want to lower the quality of the video as I need to it be full HD.
  6. Hi everyone, Have been working with video backgrounds and everything is going great. I have surfed the web and I have been trying to find out how to display an image after a video plays. I know how I can do a poster image before a video plays, I want a poster image to be displayed after the video is done. Now I don't know where I need to post this so I figure I start here. I will post my code down below so you can take a look at what I already have. Thanks in advance! <video onloadstart='this.volume=0.3' id='bg-video-index' onclick='playVideo' autoplay> <source src='media/bg-video/bg-video.mp4' type='video/mp4'> Your browser does not support HTML5 video. </video> <script src="text/javascript"> function playVideo(){ var video = document.getElementById('bg-video-index'); video.play(); video.addEventListener('ended',function(){ window.location = 'media/images/bg/logo.png'; }); } </script>
  7. Hi, I'm very new to HTML5 so please excuse me if this is an elementary question I'm using WordPress with custom built CMS. I'm using API to add videos to my pages from another CMS. The video player is provided via API as well. The problem is that the video is always shown at one size (basically takes up the entire width of a page). I was told I can use HTML5 at the page level to modify how the video is displayed. I want to be able to show the video at smaller sizes, and for example maybe have text wrap around, just like you can do with images when writing an article. But I want to make sure the video stays responsive so I don't want to just specify fixed size so it ends up being a wrong size if viewed on mobile device for example. Can someone help me with this? Thank you in advance, Kathy
  8. Here's my setup and need: I can load a video file onto my page. I have an Excel file containing a list of timestamps that correspond to positions on the video. I can convert the timestamps to video positions. For example: TimeStamp | currentTime 15:00:05 | 5 15:00:30 | 30 15:00:35 | 35 15:03:00 | 180 15:12:10 | 730 15:14:55 | 895 I will save the Excel file as a delimited .txt file. I need to load the .txt file onto my page I'm open to whatever method is best. I just need it to display next to the video. A scrolling area of some type is probably best. The file may contain hundreds of rows. I only need to display the timestamp corresponding to the current video position with a few timestamps before and a few timestamps after the current position. When I play the video, I need it to fast forward at 'n' speed (e.g. 5x) to the first video position in the loaded .txt file and stop while I type in a textarea. When I resume play of the video, I need it to fast forward to the next video position and stop, so I can type in the textarea. Note: I need the video to play in fast forward, not simply skip to, the next video position. The process in the previous bullet repeats until the end of the video is reached. While I'm at it, when the video pauses at a video position, I'd need to highlight the corresponding row in the area with the timestamp and video position. I can tackle this later, but wanted to mention it now in case it influences that type of area where the timestamp is displayed. I'm not a coder by trade, but I can muddle along when given some instruction. I'd greatly appreciate some help on the best method to load and display the text file and then some example code (or reference) on how to step through the text file as I described. I'm really not sure where to begin. Thanks in advance, Andrew
  9. UPDATE: Oh, gee! Never mind. I'm just blind. I needed doh == true, not doh=true. My page loads a video file. I desire a button that turns the video controls on and off. For the life of me, I can't figure out what I'm doing wrong in the code below. The var "doh" correctly identifies whether the video controls are on (true) or off (false). However, the IF statement always evaluates as if "doh" is TRUE. What in the heck is wrong with my IF statement? Thanks, Andrew document.getElementById("showControls").addEventListener("click", function (evt) { var doh = video.controls; alert(doh); if (doh = true) { alert("in if doh=true clause"); video.controls = false; evt.target.innerHTML = "<img alt='Show' />" } else { alert("in if doh=false clause"); video.controls = true; evt.target.innerHTML = "<img alt='Hide' />" } }, false);
  10. I currently have a tool that is an HTML page employing JavaScript to review video. It has the required features shown in the bullets below. It operates as designed, but only works with files on a local drive. I'd like to expand it's functionality to allow remote users to work with video files served up from a home based NAS or personal cloud type device. I don't know whether it's best to stream the video or have the page use a progressive download. I don't know what specific type of device would be best to use for serving up the video. (I currently have 50/50 fiber to the premises, but can upgrade to 100/100 or even 1000/1000, if needed.) Right now, I'm just trying to determine what's possible, the best method for accomplishing my goals, and the preferred type of device for serving up the video. Here are the features possessed by the current tool that will be required with the enhanced functionality. Display video within a browser window Support, at minimum, MOV and MP4 formats Controls: Play/Pause Mute/Unmute Playback speed Playback position (both know the current playback position of the video and be able to enter a value in a field, press a button, and be taken directly to that point in the video) Video display size Any help on getting me started in the right direction will be greatly appreciated. Thanks, Andrew
  11. Hi, I am a high school student working on a website for a digital media assignment. I am required to include a video introduction of myself. I have included the video, but I am having trouble shortening the gap between the video and the heading, as you can see in the picture I have provided. Any help anyone could give to me would be greatly appreciated, I hope this was posted in the right place.
  12. Hello good, I have in my web videos privately hosted on my vps and I would like to remove from the bar of reprocuccion to the option of download. Greetings and a thousand thanks
  13. I'm using the code below to load and play MOV video files in a browser window. It's working with MP4 files, but not with MOV files - but only on this one laptop. The tool runs MOV files just fine on my desktop and a little netbook I have, but not on my laptop. Recently my hard drive failed on this laptop. I had to install a new hard drive then reinstall Windows 10 and other software. Now MOV files that used to play fine with the tool will not play. However, MP4 files will play just fine. The issue is not browser specific. The MOV files fail to play in Firefox, Chrome, IE, and Edge. They will not play whether I am loading the page from our web server or localhost (when running XAMPP). When I try to play the MOV files then the page returns the message: Cannot play video (type) "" I have no idea what general PC setting could be causing this issue. Any help will be greatly appreciated. Thanks in advance, Andrew // ---------- VIDEO LOADER ---------- var vvid = document.getElementById("video"); (function localFileVideoPlayerInit(win) { var URL = win.URL || win.webkitURL, displayMessage = (function displayMessageInit() { var node = document.querySelector('#message'); return function displayMessage(message, isError) { node.innerHTML = message; node.className = isError ? 'error' : 'info'; }; }()), playSelectedFile = function playSelectedFileInit(event) { var file = this.files[0]; var type = file.type; var videoNode = document.querySelector('video'); muteUnmute(); var canPlay = videoNode.canPlayType(type); canPlay = (canPlay === '' ? 'no' : canPlay); if (canPlay === "no") { var message = 'Cannot play video (type) "' + type + '"'; } else { var message = ""; } var isError = canPlay === 'no'; displayMessage(message, isError); if (isError) { return; } var fileURL = URL.createObjectURL(file); videoNode.src = fileURL; }, inputNode = document.querySelector('input'); if (!URL) { displayMessage('Your browser is not ' + '<a href="http://caniuse.com/bloburls">supported</a>!', true); return; } inputNode.addEventListener('change', playSelectedFile, false); }(window)); sizer(70); //sets initial display of video to 70%
  14. This is my site: http://feriapixel.cl/cleanway/index.php As you can see, if you are using Chrome, it has a video background at the beginning, but when i view it with Firefox, the video doesn't appear at all. This is the HTML and javascript of my video: <video id="my-video" class="video" muted loop> <source src="videos/Clean_Way.mp4" type="video/mp4"> <source src="videos/Clean_Way.webm" type="video/webm"> </video><!-- /video --> <script> (function() { /** * Video element * @type {HTMLElement} */ var video = document.getElementById("my-video"); /** * Check if video can play, and play it */ video.addEventListener( "canplay", function() { video.play(); }); })(); </script> I need to add something for Firefox?
  15. SUGGESTION. I don't know who to turn to to suggest this. You are just a school, I know - not the organizational body that determines HTML. Yet, perhaps you can direct me to the proper channel or pass on this request. My page has a black background and I have video controls <video controls> on it, which show up as white rectangles with black control icons. UGLY. It does not blend into the page. It would be nice if I could control the appearance of the controls, say reverse them out -- black background (which would blend into my background) with white control icons. Alternatively, it'd be nice to be able to use one's own control icons as graphics. With such an option one could have any color background, even patterned. I am writing the script longhand with BBEdit, and doing my initial viewing/testing with Chrome.
  16. Ok so I found out that it is easier to learn from ​video tutorials!. And I tried to figure out how can I fit whole website in a video. ​But the answer is 1interactive video tutorials! Imagine that you have a video and at the beginning you can select what do you want to learn, and select what chapter do you want to start in! For the memory check there can be quizzes in the middle of chapters for example when a code is being typed a quiz pops up that asks us what should I write next to make something happen! I heard that 3/4 people understands better when something is explained in a video. This could heavily increase the use of w3schools tutorials because you can save that video where ever you want! You can watch it in phone, computer and you do not need internet access! 2This might be a hard work but it will be a hard hit with a loud boom! ​ 1. Interactive video is a video that you can interact with! For example in a video you see a lot of buttons and you can click on them to do something! 2. What it means is that the more work you put the better results will be! ​Hope you like this idea!
  17. Want to create custom video player for my site. Have a problems with creating buttons and put them to right place
  18. UPDATE: Please skip to Post #11 (where I've re-started the post with, "UPDATE: Restarting question/post here...") Is it (reasonably) possible to autoscroll a text (txt) blob during the playback of a video on a page, and if so then how? What I'm wanting to accomplish is very similar to what SoundHound does with audio files and lyrics; while the audio file plays the synchronized lyrics scroll by in a frame. For example, I have a video 10 minutes long that I will play on a web page. I have a txt file with short lines of data.I can manipulate the txt file however needed to make this process work. Each line of text has a time stamp (and I can place the time stamp wherever in the line I want or need it placed). The times (timestamped lines) are not in even time intervals (but I can make the intervals even by placing in filler lines if needed). Most likely I'll have one line of text for every second (and I can even force it to be one line/row per second if it makes it easier). The text lines vary in length (but if really needed I could make them the same length, so it might be possible to scroll by byte range). [*]On my page: I will have the video playing. Below the video I will have the txt blob displaying in a scrolling field. [*]I would like the text blob to scroll automatically in synchornization with the video. If the user speeds up or slows down the video or jumps to a new place (forward or back) in the video, the blob needs to remain in sync. When the video is paused then the blob needs to stop scrolling. Is this something reasonably do-able? If so, can someone point me to or provide an example? (I'm a noob at this, but trainable.) Thanks in advance, Andrew
  19. This is my embed code but can't get it to work. <div style='text-align:center'><script type='text/javascript' src=‘http://pshared.5min.com/Scripts/PlayerSeed.js?sid=281&width=480&height=401&playList=517393213'></script><br/></div> When I place it in the body tag, nothing even shows up. Seems to ignore it completely. What am I doing wrong?
  20. I have a page that links to a video. When it loads, there is a lag in video loading, meaning the video loads but after a few seconds from loading the rest of content. I would appreciate if someone can show me how I can make the video loads exactly at the same time of everything else.
  21. I used PHP MyAdmin to create a database catalog now I want to add a Youtube video to each item but I don't know how because is a dynamic database. So how do I make it know all video come from Youtube and how do I make to configure the register form so when I add a new item it know what video it is? Does is true when I add a new item I only insert the video code, not the entire address? How do I do that? I'm using Dreamweaver CC+PHP.
  22. Warning: Noob alert. I was a complete noob 8 or 10 years ago and could fumble my way around Javascript, but I haven't touched it since. It's coming back to me, but slowly I have a web page where I play a video. Everything is working fine (with lots of snippets taken from this site). Below is both a sampling of the HTML and Javascript code used. At the bottom of this post I've pasted the contents of the whole page in case it is helpful. Body Snippet: <div> <video id="video"> <source src="myfile.mp4" type="video/mp4"> <!--I WANT THE PAGE USER TO BE ABLE TO CHANGE THE SRC FILE--> Your browser does not support HTML5 video. </video></div> Script Snippet: var vvid = document.getElementById("video"); function playPause() { if (vvid.paused) vvid.play(); else vvid.pause();}//...and lots, lots, more video control functions. However, I want to allow a user to change the video file being played. I would be nice for them to be able to click on a button that opens the file dialog where they would navigate to and select the video to be played. But if that's too complicated to implement then just placing the path and file name in an input text box for submission &/or reading by the script is fine too. I don't have need to implement playlists or anything fancy. This is for my where the page and files are on a local machine and XAMPP is being used as the server. I can do it with loading the text blob, but I've tried for hours and just can't figure out how to allow the user to select the video source (src). I'd be very appreciative if someone would show me how to do it. Thanks in advance, Andrew CODE FOR THE WHOLE PAGE, IN CASE IT IS HELPFUL: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>Video Viewer</title><style>#title { font-family:Arial, Helvetica, sans-serif; font-size:xx-large; font-weight:bold; color:black; text-align:center;}#video { margin-top: 10px; margin-bottom: 2px; background: gray; background-position: center;}#speeds { width: 40px; margin-bottom:10px; font-size: xx-large; background: #808080; background-position:center; border:medium; border-color:black; border-style:solid; font-weight: bold; font-family: Arial, sans-serif;}/* STYLES FOR THE TEXT BLOBS */ #byte_content { margin: 5px 5px; max-height: 300px; overflow-y: auto; overflow-x: hidden; } #byte_range { margin-top: 5px; }/* END OF STYLES FOR THE TEXT BLOBS */</style></head><body onload="pageLoad()"> <div id="title">Video Viewer</div> <table cellpadding="0" cellspacing="0" align="center"> <tr align="center"> <td> <div style="text-align:center"> <button onclick="playPause()">Play/Pause</button> <button onclick="muteUnmute()" type="button">Mute/Unmute</button> <br/> <button onclick="size50()">Smallest</button> <button onclick="size75()">Smaller</button> <button onclick="size100()">Normal</button> <button onclick="size150()">Larger</button> <button onclick="size200()">Largest</button> <br/> Playback Speeds: <button onclick="speed10()">10%</button> <button onclick="speed25()">25%</button> <button onclick="speed50()">50%</button> <button onclick="speed75()">75%</button> <button onclick="speed100()">100%</button> <button onclick="speed125()">125%</button> <button onclick="speed150()">150%</button> <button onclick="speed175()">175%</button> <button onclick="speed200()">200%</button> <button onclick="speed400()">400%</button> <br/> Set Time: <button onclick="timeStart()">Start</button> <button onclick="timeValue('txt1')">Set Time</button> <input type="text" name="txt1" size="4" value="0" id="txt1"/> <button onclick="timeback10()">-10</button> <button onclick="timeback8()">-8</button> <button onclick="timeback6()">-6</button> <button onclick="timeback4()">-4</button> <button onclick="timeback2()">-2</button> <button onclick="timeforward2()">+2</button> <button onclick="timeforward4()">+4</button> <button onclick="timeforward6()">+6</button> <button onclick="timeforward8()">+8</button> <button onclick="timeforward10()">+10</button> <button onclick="timeforwardEnd()">End</button> Pause After Changes: <input type="text" name="txt2" size="4" value="1" id="txt2"/> </div> </td> </tr> <tr align="center"> <td> <div> <video id="video"> <source src="oceans.mp4" type="video/mp4"> <!--I WANT THE PAGE USER TO BE ABLE TO CHANGE THE SRC FILE--> Your browser does not support HTML5 video. </video> </div> </td> </tr> <tr align="center"> <td> <div> [Current Playback Speed: <span id="speed"></span>] <button onclick="speedSlower()" id="speeds"><img alt="slow" height="25" src="images/slow.png" width="25" /></button> <button onclick="backIt(this)" id="speeds"><img alt="slow" height="25" src="images/back.png" width="25" /></button> <button onclick="playPause()" id="speeds">II</button> <button onclick="forwardIt(this)" id="speeds"><img alt="fast" height="25" src="images/forward.png" width="25" /></button> <button onclick="speedFaster()" id="speeds"><img alt="fast" height="25" src="images/fast.png" width="25" /></button> [Playback position: <span id="elapsed"></span> of <span id="duration"></span>] </div> </td> </tr> <tr align="center"> <td> <input type="file" id="files" name="file" /> Read bytes: <span class="readBytesButtons"> <button data-startbyte="0" data-endbyte="60">01-60</button> <button data-startbyte="61" data-endbyte="120">60-120</button> <button data-startbyte="121" data-endbyte="180">121-180</button> <button>All</button> </span> <div id="byte_range"></div> <div id="byte_content"></div> </td> </tr> </table> <!-- ---------- JAVASCRIPT ------------ --><script> // ------------ HELP SOURCES ------------ //http://www.w3schools.com/js/js_examples.asp // ------------ MAIN VARIABLES ------------ var vvid = document.getElementById("video"); // ------------ PLAY PAUSE ------------ function playPause() { if (vvid.paused) vvid.play(); else vvid.pause(); } // ------------ SOUND ------------ function muteUnmute() { if (vvid.muted) vvid.muted = false; else vvid.muted = true;}// ------------ RESIZE VIDEO ------------ function size50() { vvid.width = 360; } function size75() { vvid.width = 540; } function size100() { vvid.width = 720; } function size150() { vvid.width = 1080; } function size200() { vvid.width = 1440; } // ------------ PLAYBACK SPEED ------------ function speedSlower() { vvid.playbackRate = vvid.playbackRate-0.1;} function speed10() { vvid.playbackRate = 0.1;} function speed25() { vvid.playbackRate = 0.25;} function speed50() { vvid.playbackRate = 0.50;} function speed75() { vvid.playbackRate = 0.75;} function speed100() { vvid.playbackRate = 1;} function speed125() { vvid.playbackRate = 1.25;} function speed150() { vvid.playbackRate = 1.5;} function speed175() { vvid.playbackRate = 1.75;} function speed200() { vvid.playbackRate = 2;} function speed400() { vvid.playbackRate = 2;} function speedFaster() { vvid.playbackRate = vvid.playbackRate+0.1;} // ------------ SET TIME POSITION ------------ function pageLoad() { vvid.currentTime=0; vvid.pause(); muteUnmute();}function timeStart() { vvid.currentTime=0; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeValue(id) { var txtbox1 = document.getElementById(id="txt1"); var txt1value = txtbox1.value; vvid.currentTime=txt1value var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeback10() { vvid.currentTime=vvid.currentTime-10; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeback8() { vvid.currentTime=vvid.currentTime-8; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeback6() { vvid.currentTime=vvid.currentTime-6; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeback4() { vvid.currentTime=vvid.currentTime-4; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeback2() { vvid.currentTime=vvid.currentTime-2; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeforward2() { vvid.currentTime=vvid.currentTime+2; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeforward4() { vvid.currentTime=vvid.currentTime+4; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeforward6() { vvid.currentTime=vvid.currentTime+6; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeforward8() { vvid.currentTime=vvid.currentTime+8; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeforward10() { vvid.currentTime=vvid.currentTime+10; var txtbox2 = document.getElementById(id="txt2"); var txt2value = txtbox2.value*1000; setTimeout(function(){ vvid.play(); }, txt2value); vvid.pause();}function timeforwardEnd() { vvid.currentTime=vvid.duration;}function backIt(x) {vvid.currentTime=vvid.currentTime-1;}function normalIt(x) {//this would do something when then mouse leaves the + or - boxes}function forwardIt(x) {vvid.currentTime=vvid.currentTime+1;}// Get the video playback position element (time value) and ending time value with id="video" var vid = document.getElementById("video"); // Assign an ontimeupdate event to the video element, and execute a function if the current playback position has changed vid.ontimeupdate = function() {myFunction()}; function myFunction() { // Display the current position of the video in an element with id="elapsed" document.getElementById("elapsed").innerHTML = (Math.round(vid.currentTime*100)/100).toFixed(2); document.getElementById("duration").innerHTML = (Math.round(vid.duration*100)/100).toFixed(2); document.getElementById("speed").innerHTML = (Math.round(vid.playbackRate*100)/100).toFixed(1); } // --------- SCRIPTS FOR THE TEXT BLOBS ----------- function readBlob(opt_startByte, opt_stopByte) { var files = document.getElementById('files').files; if (!files.length) { alert('Please select a file!'); return; } var file = files[0]; var start = parseInt(opt_startByte) || 0; var stop = parseInt(opt_stopByte) || file.size - 1; var reader = new FileReader(); // If we use onloadend, we need to check the readyState. reader.onloadend = function(evt) { if (evt.target.readyState == FileReader.DONE) { // DONE == 2 document.getElementById('byte_content').textContent = evt.target.result; document.getElementById('byte_range').textContent = ['Read bytes: ', start + 1, ' - ', stop + 1, ' of ', file.size, ' byte file'].join(''); } }; var blob = file.slice(start, stop + 1); reader.readAsBinaryString(blob); } document.querySelector('.readBytesButtons').addEventListener('click', function(evt) { if (evt.target.tagName.toLowerCase() == 'button') { var startByte = evt.target.getAttribute('data-startbyte'); var endByte = evt.target.getAttribute('data-endbyte'); readBlob(startByte, endByte); } }, false);// --------- END OF SCRIPTS FOR THE TEXT BLOBS --- </script> </body> </html>
  23. i have a code to change a imagen to another by passing the mouse over. What i want is that when i pass the mouse over the image, this convert to a video, i am a beginner in this and i tried a lot but i can't solve this. This is my code: <head><script language="JavaScript">{alt0 = new Image();alt0.src = "img0.png";alt1 = new Image();alt1.src = "gif1.gif";alt2 = new Image();alt2.src = "gif2.gif";alt3 = new Image();alt3.src = "gif3.gif";graphic1= new Image();graphic1.src = "img1a.png";graphic1on = new Image();graphic1on.src = "img1b.png";graphic2= new Image();graphic2.src = "img2a";graphic2on = new Image();graphic2on.src = "img2b";graphic3= new Image();graphic3.src = "img3a.png";graphic3on = new Image();graphic3on.src = "img3b.png";}function imageChange(imageID,imageName,imageID2,imageName2,imageID3,imageName3) { {document.images[imageID].src = eval(imageName + ".src");document.images[imageID2].src = eval(imageName2 + ".src");document.images[imageID3].src = eval(imageName3 + ".src");}}</script><body><center><table border="0"><tr><td><a onmouseout="imageChange('global','alt0','one','graphic1')" onmouseover="imageChange('global','alt1','one','graphic1on')"><img border="0" name="one" src="img1a.png" /></a></td><td><a onmouseout="imageChange('global','alt0','two','graphic2')" onmouseover="imageChange('global','alt2','two','graphic2on')"><img border="0" name="two" src="img2a.png" /></a></td><td><a onmouseout="imageChange('global','alt0','three','graphic3')" onmouseover="imageChange('global','alt3','three','graphic3on')"><img border="0" name="three" src="img3a.png" /></a></td></tr></table></center><center><table border="0"><tr><td><img height="290" name="global" src="img0.png" width="530" /></td></tr></table></center></body></head> i actually use a gif but this images are very slow to load so i used the "gfy" page, that convert the gif to a video. This is the link to the "gfy": http://gfycat.com/ShockingDependableHogget and this is the code: <video id="gfyVid1" class="gfyVid" width="646" height="326" autoplay="" loop="" muted="muted" style="display: block;"> <source id="mp4source" src="//zippy.gfycat.com/ShockingDependableHogget.mp4" type="video/mp4"> </video> So, what i want is replace the gif image for this video... Thank for reading and sorry for my english.
  24. Hi everyone, I tried to make a video which will start at the beginning and star over again <video id="Video1" controls autoplay loop> <source src="VideoXYZ.mp4" type="video/mp4"> <source src="VideoXYZ" type="video/webm"> <source src="VideoXYZ" type="video/ogg"> Your Browser does not support the video tag </video> But I want to loop the video 5 or 7 times then it definitely stops until I refresh the page, and of course I don't have a clue how to make a timer to LOOP. First, is it possible to do this? if yes, how to do it? Thank you
  25. Does anyone know of a good videoformat uploader, such as jwplayer, that i can use on my website to allow users to upload video. I tried jwplayer but i got so many problems whit it, and i think its bad. Any suggestions?
  • Create New...