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. I've decided to share my post from the JavaScript forum here in case this is the more appropriate place. It's involving MODALS with Bootstrap & JQuery and my question is below. Thank you.
  2. Hello, if this is not in the appropriate forum (or has been addressed already), please advise and I will update accordingly. Thank you. I'm updating my ancient website and I decided to use MODALs for my page with videos which embed various videos from various video servers; YouTube, Vimeo, etc.): My website VIDEO page Using: W3.CSS + JavaScript + Bootstrap & JQuery If I wanted to reference a specific video modal from a link (maybe sent in an email) or from another webpage (and have the modal automatically open), how do I do that? I found some code on the web using window.location.hash and it's included in my code at the end, but this does not do what I need (it's close though...). Thank you very much in advance 🙂 My code is below (including only 4 video modals, not all 55) <!DOCTYPE html> <html> <title>Julie Meitz Video & Film</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- BOOTSTRAP & JQuery --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="../../css/style.css"> <body> <!-- Horizontal Navbar Main & Work --> <div class="w3-top"> <div class="w3-bar w3-white w3-card w3-border w3-left-align w3-large"> <a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-padding-large w3-large" href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a> <a href="../../index.html" class="w3-bar-item w3-button w3-padding-large">Home</a> <!-- <a href="../../index.html#about" class="w3-bar-item w3-button w3-hide-small w3-padding-large">About</a> <a href="../../index.html#contact" class="w3-bar-item w3-button w3-hide-small w3-padding-large">Contact</a> --> <a href="../multimedia_shows/index.html" class="w3-bar-item w3-button w3-hide-small w3-padding-large">Multimedia</a> <a class="w3-bar-item w3-button w3-hide-small w3-padding-large w3-text-white w3-gray">Video</a> <a href="../vj_fj/index.html" class="w3-bar-item w3-button w3-hide-small w3-padding-large">VJ & FJ</a> <a href="../other/index.html" class="w3-bar-item w3-button w3-hide-small w3-padding-large">Other</a> </div> <!-- Vertical Sidebar on small screens Main --> <div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium w3-large" style="padding:10px 0px 10px"> <a href="../../index.html#about" class="w3-bar-item w3-button w3-padding-large">About</a> <a href="../../index.html#contact" class="w3-bar-item w3-button w3-padding-large">Contact</a> <a href="../multimedia_shows/index.html" class="w3-bar-item w3-button w3-padding-large">Multimedia</a> <!-- <a href="../videos_films/index.html" class="w3-bar-item w3-button w3-padding-large">Video</a> --> <a href="../vj_fj/index.html" class="w3-bar-item w3-button w3-padding-large">VJ & FJ</a> <a href="../other/index.html" class="w3-bar-item w3-button w3-padding-large">Other</a> </div> </div> <!-- Video & Film --> <div class="w3-container" style="padding:80px 16px 40px"> <div class="row"> <!-- Using a href (with image) to trigger modal --> <!-- Scrap Video # 1 2017 --> <div class="column"> <div class="container" style="padding: 0px 0px 0px 0px"> <a data-toggle="modal" href="#vfModal" class="video-link" id="VF10a" data-src="https://www.youtube.com/embed/bUzUflnktaU" data-vtitle="<a href='https://youtu.be/bUzUflnktaU' target='_blank style' style='text-decoration: underline'>EXPERIMENTAL: Scrap Video # 1 (2017)</a>" data-vdesc="<p>&nbsp</p><p class='big'><b>Description:</b> An experimental video created from unused video. 2015 : Video of myself on my 49th birthday while testing green screen and involved in art therapy. 2016 : Attempted to work with footage again and applied a Photoshop filter, short video made, but not interesting enough to publish (and too personal). 2017 : Tired of trying to figure out what to do with this footage, so I made this 'scrap' video, including sound effects. Now it's time to get it off my hard drive.</p> <p class='big'><b>Video:</b> Julie Meitz / Vaulx-en-Velin, France 2017</p> <p class='big'><b style='color: red'>Note:</b> This video was not shown at screenings/festivals, I just made it for myself.</p> <p class='big'><b>Skills:</b> Conception, camera, editing, color & correction grading & visual effects</p> <p class='big'><b>Tools:</b> Adobe Creative Suite</p>"> <img src="images/scrap-video-1-julie-meitz-0.jpg" alt="Scrap Video # 1" style="width:100%"> <div class="overlay"><div class="text2">Scrap Video # 1<hr><div style="letter-spacing: 2px;font-size: 15px;">EXPERIMENTAL</div></div></div> </a> </div> </div> <!-- The Small World / Le Petit Monde 2016 --> <div class="column"> <div class="container" style="padding: 0px 0px 0px 0px"> <a data-toggle="modal" href="#vfModal" class="video-link" id="VF1" data-src="https://www.youtube.com/embed/agsb-sXB3L4" data-vtitle="<a href='https://youtu.be/agsb-sXB3L4' target='_blank style' style='text-decoration: underline'>Promotional Video: Le Petit Monde / The Small World (2016)</a>" data-vdesc="<p>&nbsp</p><p class='big'><b>Description:</b> A promotional video for the international private school <a href='https://lepetitmonde.org/' target='_blank style' style='text-decoration: underline'>Le Petit Monde.</a></p> <p class='big'><b>Video:</b> Julie Meitz / <b>Music:</b> <a href='https://incompetech.com/' target='_blank style' style='text-decoration: underline'>Kevin MacLeod - Life of Riley</a> / Lyon, France 2016</p> <p class='big'><b>Skills:</b> Conception, direction, camera, editing, color & correction grading, sound manipulation & correction, visual effects & graphic art</p> <p class='big'><b>Tools:</b> Adobe Creative Suite</p>"> <img src="images/le-petit-monde-julie-meitz-0.jpg" alt="The Small World / Le Petit Monde" style="width:100%"> <div class="overlay"><div class="text2">Le Petit Monde /<br>The Small World<hr><div style="letter-spacing: 2px;font-size: 15px">PROMOTIONAL</div></div></div> </a> </div> </div> <!-- DR VoltairEAM / Dream Voltaire (Video Only) 2016 --> <div class="column"> <div class="container" style="padding: 0px 0px 0px 0px"> <a data-toggle="modal" href="#vfModal" class="video-link" id="VF9" data-src="https://www.youtube.com/embed/zXQ1PCZeeIY" data-vtitle="<a href='https://youtu.be/zXQ1PCZeeIY' target='_blank style' style='text-decoration: underline'>EXPERIMENTAL Video Mapping: DR VoltairEAM / Dream Voltaire (Video Only) (2016)</a>" data-vdesc="<p>&nbsp</p><p class='big'><b>Description:</b> An original & remix work about Voltaire for the <a href='https://www.ferney-voltaire.fr/' target='_blank style' style='text-decoration: underline'>Fête de Voltaire</a>. Made in a dreamlike, surreal, kitsch and political style using excerpts from his book, Micromegas, various related images and films, historical information and statistical data from Standford University. The video was mapped to Voltaire's old theater, La Maison Fusier.</p> <p class='big'><b>Video:</b> Julie Meitz (artist residency) / <b>Artistic Direction:</b> <a href='https://mobilhomme.weebly.com/' target='_blank style' style='text-decoration: underline'>Mobil'Homme: Philippe Pellier</a> / <b>Credits:</b> <a href='docs/Credits-Dr-Voltairem-Julie-Meitz-2016.txt' target='_blank style' style='text-decoration: underline'>Various AV Sources</a> / <b>Other:</b> <a href='../multimedia_shows/2016-06-voltaire/dr-voltaiream-2016_julie-meitz.pdf' target='_blank style' style='text-decoration: underline'>Program</a> / <a href='../multimedia_shows/2016-06-voltaire/index.html' target='_blank style' style='text-decoration: underline'>MULTIMEDIA VIDEO MAPPING: Photos, info...</a> / <a href='https://flic.kr/s/aHskDg1jLF' target='_blank style' style='text-decoration: underline'>Photos</a> / Ferney-Voltaire, France 06/2016</p> <p class='big'><b>Skills:</b> Conception, research, animation, editing, color & correction grading, sound manipulation & correction, visual effects & graphic art (& Video Mapping)</p> <p class='big'><b>Tools:</b> Adobe Creative Suite (Video Mapping: Resolume Arena 5)</p>"> <img src="images/dr-voltaiream-julie-meitz-0.jpg" alt="DR VoltairEAM / Dream Voltaire" style="width:100%"> <div class="overlay"><div class="text2">DR VoltairEAM /<br>Dream Voltaire<hr><div style="letter-spacing: 2px;font-size: 15px;">EXPERIMENTAL<br>Video Mapping</div></div></div> </a> </div> </div> <!-- Electro-Volution Extracts (iKICK! / VJ + DJ) 2016 --> <div class="column"> <div class="container" style="padding: 0px 0px 0px 0px"> <a data-toggle="modal" href="#vfModal" class="video-link" id="VF2" data-src="https://www.youtube.com/embed/87rzhcq3Ozg" data-vtitle="<a href='https://youtu.be/87rzhcq3Ozg' target='_blank style' style='text-decoration: underline'>Promotional Art Video VJ + DJ: Electro-Volution Extracts for iKICK! (2016)</a>" data-vdesc="<p>&nbsp</p><p class='big'><b>Description:</b> An experimental black & white video made for my performance with <a href='https://fr-fr.facebook.com/ikick.djamency.atix/' target='_blank style' style='text-decoration: underline'>iKICK!</a>, DJs D'Jamency and Atix. During the performance individual clips of this footage were triggered live in my VJ application, sometimes with VJ effects, sometimes superimposed, etc. This video is a reconstruction of the original footage (which I lost) rebuilt with the VJ DXV files scaled up and synced to the audio.</p> <p class='big'><b>Video:</b> Julie Meitz / <b>Music:</b> <a href='https://soundcloud.com/ikick-live' target='_blank style' style='text-decoration: underline'>iKICK! - Techno Live Project</a> / <a href=../vj_fj/images/ikick-julie-meitz-tannerie-2016-fly.jpg target='_blank style' style='text-decoration: underline'>Flyer</a> / <a href='https://flic.kr/s/aHsmXgKBnn' target='_blank style' style='text-decoration: underline'>Images</a> / <a href='https://youtu.be/V2x7l6JneXc' target='_blank style' style='text-decoration: underline'>iKICK! & Julie Meitz Live</a> / Producer: AsenseProd / Lyon, France 2016</p> <p class='big'><b>Skills:</b> Conception, animation, editing, correction grading, visual effects & graphic art</p> <p class='big'><b>Tools:</b> Adobe Creative Suite (VJing: Resolume Arena 4 + nanoKONTROL + AKAI LPK25)</p> <p class='big'><b>Related:</b> <a href='https://youtu.be/raU4ltDuxmc' target='_blank style' style='text-decoration: underline'>iKICK! promotional video</a></p>"> <img src="images/electro-volution-julie-meitz-0.jpg" alt="Electro-Volution" style="width:100%"> <div class="overlay"><div class="text2">Electro-Volution<hr><div style="letter-spacing: 2px;font-size: 15px;">EXPERIMENTAL<br>VJ + DJ</div></div></div> </a> </div> </div> <!-- OTHER VIDEO MODALS REMOVED--> <!-- Modal Bootstrap JS jQuery--> <div class="modal fade" id="vfModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-xl" role="document"> <div class="modal-content"> <div class="modal-header"> <!-- <h5 class="modal-title"><a href="https://youtu.be/agsb-sXB3L4" target="_blank style" style="text-decoration: underline">Video: The Small World / Le Petit Monde</a></h5> --> <h5 class="modal-title" id="exampleModalLabel"></h5> <button type="button" class="close" data-dismiss="modal">&times;</button> </div> <div class="modal-body"> <!-- 16:9 aspect ratio --> <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="" id="video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> <div class="video-desc"></div> </div> </div> </div> </div> </div> </div> <!-- SCRIPTS --> <script> // Used to toggle the menu on small screens when clicking on the menu button function myFunction() { var x = document.getElementById("navDemo"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } } </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <script> $(document).ready(function() { // Gets the video src from the data-src on each a href="#" var $videoSrc; $('.video-link').click(function() { $videoSrc = $(this).data( "src" ); }); console.log($videoSrc); $('#vfModal').on('show.bs.modal', function (event) { var button = $(event.relatedTarget) // button that triggered the modal (but I'm using a href link! but it seems to work?...) var vidTitle = button.data('vtitle') // Extract info from data-* attributes var vidDesc = button.data('vdesc') var vidId = button.data('id') // If necessary, you could initiate an AJAX request here (and then do the updating in a callback). // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead. var modal = $(this) //modal.find('.modal-title').html("<a href=https://youtu.be/agsb-sXB3L4 target='_blank style' style='text-decoration: underline'>Video: The Small World / Le Petit Monde</a>") modal.find('.modal-title').html(vidTitle) modal.find('.video-desc').html(vidDesc) // when the modal is open show video & add ?rel=0 to show only my videos when paused $("#video").attr('src',$videoSrc + "?rel=0" ); }) // when the modal is opened show video & add ?rel=0 to show only my videos when paused //$('#vfModal').on('show.bs.modal', function (e) { //$("#video").attr('src',$videoSrc + "?rel=0" ); //}) // stop playing the youtube video when modal is closed $('#vfModal').on('hide.bs.modal', function (e) { // Remove the src attribute (remove video) before closing modal $("#video").attr('src',''); }) }); </script> <script> // Sending a link from an external page - this only works sending the same modal, how to get it to pick up a specific video modal??? $(document).ready(function() { var modals = ['#vfModal']; if (window.location.hash && ~modals.indexOf(window.location.hash)) { $(window.location.hash).modal(); } }) </script> </body> </html>
  3. 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>
  4. 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.
  5. 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.
  6. 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; }
  7. 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.
  8. 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>
  9. 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
  10. 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
  11. 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);
  12. 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
  13. 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.
  14. 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
  15. 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%
  16. 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?
  17. 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.
  18. 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!
  19. Want to create custom video player for my site. Have a problems with creating buttons and put them to right place
  20. 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
  21. 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?
  22. 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.
  23. 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.
  24. 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>
  25. 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.
  • Create New...