My problem is that I need to have 1 video player on the website for my project on school (new to this stuff!) but it needs to be able to play 2 videos (depends on the one you select from the drop down menu above the video player) but I have no idea how to make that possible.
The first video is called: video_1 (mp4 format and also have a ogv format for opera)
The second video is called: video_2 (mp4 format and also have a ogv format for opera)
they both are in a map called: video (just giving that for the code)
So.. Could anyone please help me out with this?!
thanks in advance
You need something as simple as this:
<div id="videoDiv">
<video id="video"
width="480" height="360"
controls>
<source src="video/video_1.mp4">
</video>
</div>
From this point - you only need to place your videos in a folder named "video" and a little JavaScript to change the source when the user changes the selection in the drop-down control.
There are different solutions here, but I think you should continue searching Google for answers. Learning things by experimentation is by far the best way to learn anything. But, you could redirect the page after the visitor changes the select option, like what is done here: Redirect automatically when selecting an item from a select drop-down list. (Don't forget to include the jQuery in your HTML-page). Or look for a function that changes a value in the body of your html with JavaScript/jQuery like the other answer suggests.
Hope this helps. We are here to help you learn, not help you with your homework ;)
Related
I am new to HTML and CSS (So that may be the issue). I entered the following code into my html doc:
<video controls width="700">
<source src="video/PristineCustomCleansVideo.mp4" type="video/mp4">
</video>
The video I want to play is inside a folder called video. The index.html and the video folder are nested inside a folder together.
The video shows up on the site I'm making as a gray rectangle with controls (in a Brave browser). When I press play nothing happens. I also tried opening my page in Firefox and within the gray rectangle it says "No video with supported format and MIME type found."
I looked up this question and have found so many confusing suggestions. Whatever you recommend, please do it as if I know very little about computers (I thought I knew a good amount until reading some of the responses and can't follow what I should do. lol)
Another issue I am considering is if I have to do a lot of work to get the video to play, will others that I send my website URL to have issues as well? This is for a class project. I have to put everything on the school's server and share the URL with the teacher.
If your index page and the video are located in exactly the same place you do not need the video folder in the path to your file. The following should work.
source src="PristineCustomCleansVideo.mp4" type="video/mp4"
i need some help. I have seen on many different websites that they have changed the color of the youtube video menu.
this one
i dont know how to change the color.
my code.
<iframe width="760" height="428" src="https://www.youtube.com/embed/92HOgzQvtOw" frameborder="0" allowfullscreen></iframe>
if you know how to change color please write a comment i have been searching everywhere and i have not found an asnwer. hope i can get one here :)
thank you
EDIT: This answer is deprecated since YouTube has changed how their player works. I'll try to update this answer when I can.
You can change it by specifying color when you embed a Youtube video as mentioned in their documentation here.
color (supported players: AS3, HTML5) This parameter specifies the
color that will be used in the player's video progress bar to
highlight the amount of the video that the viewer has already seen.
Valid parameter values are red and white, and, by default, the player
will use the color red in the video progress bar.
Unfortunately it seems AS3 and JavaScript are deprecated now so you will have to use the Youtube Iframe embed API. They have documentation I linked about and I believe you would go about setting up by simply making the embed link have the color parameter i.e.
https://www.youtube.com/embed/M7lc1UVf-VE?color=white
<iframe width="560" height="315" src="https://www.youtube.com/embed/M7lc1UVf-VE?color=white" frameborder="0" allowfullscreen></iframe>
If you want a CUSTOM color... I believe the only way is creating a custom progress bar (along with all the video controls because the two are tied together. That is a little more extensive. I feel they purposely they did this so the player can stay true to the original brand. You can however do something with the API because you have access to player.getVideoLoadedFraction() and player.getCurrentTime()
Playback status
player.getVideoLoadedFraction():Float Returns a number between 0 and 1
that specifies the percentage of the video that the player shows as
buffered. This method returns a more reliable number than the
now-deprecated getVideoBytesLoaded and getVideoBytesTotal methods.
So if you really wanted, you can customize your own progress bar by feeding it in values with JavaScript.
Try to add ?theme=light to the YouTube URL.
I googled a little bit and found this website: https://www.reembed.com
And here's even more help. It seems that you might have to use the YouTube API to get what you want: http://tutorialzine.com/2010/07/youtube-api-custom-player-jquery-css/
Maybe that could help you out?
I was wondering if there was a way to give a visitor the option to speed up or slow down HTML5 video? Here's how I'm embedding the videos:
<center><video class="video" width="1024" height="576" src="Videos/' . $_GET["video"] . '" controls autoplay>If you\'re reading this, your browser sucks. Upgrade your browser to watch this video.</video><center>
Is there some way that I could incorporate some controls for the user so that he/she can control the playback speed? e.g. buttons to speed/slow up/down (respectively) the video by X amount?
EDIT:
I've found this plugin (github link), and I was wondering if there was a way of incorporating this, or something similar, directly into the website so that the user would not have to install the extension. The reason that this plugin is actually pretty good, is that it allows for the playback speed to be altered whilst the video is playing.
In order to control the playback rate, you can using playbackRate property. Please look at this question which answers your question answer
For speed-control via keyboard keys try stackoverflow.com/a/67440385
(Someone please delete duplicate comments above, and move THIS comment to answer #1, where "add a comment" was ACTUALLY clicked - TY -- Sorry, cannot even flag this issue.)
I'm curious to what the best practice is in regards to embedding youtube videos on a site? Ideally I will want to auto-play a default video with it muted while having other videos available as thumbnails.
Any recommended plugins? Should I use an iframe or an object?
Thank you in advance!
Your question is very broad: it's hard to know how to help you. If you're using WordPress, for instance, you'll have some plugins to help you do this, but otherwise it depends on whether you intend to dynamically generate the videos or manually create a page with the main video and thumbnails chosen by you in advance.
If you intend to program your page, you'll want to use the YouTube Data API (version 3 preferably, which uses JSON to keep payload sizes down).
If you're manually laying the page out, look at the watch page for a YouTube video, and you can get the embed code there. Click 'Share -> Embed' and then you'll see an iframe tag from which you can fiddle with to alter the size parameters to suit your needs.
One thing to note though: if you make a video autoplay on a page, as far as I know you forfeit the opportunity to have the viewcount increase for that video. So if you want to promote one of your own and intend the viewcount to go up each time, you have to allow users to start the video.
The title pretty much says it all. I have a spot on a webpage that currently plays a video. I'd like to update the page such that I can add a line of code with a reference to a couple files located in a folder with the source, and the page will play the first video, then the second, etc. until it reaches the final video, and then play the first video again, looping indefinitely. It's extremely preferable that this line of code would be able to play video files, .swf files, pictures (for a pre-determined length of time), etc.
Currently, I'm just using a very rudimentary
<video width="100%" height="100%">
<embed loop="true" showcontrols="0" align="left" src="New Site Folder\DemoVid_sound_mods.avi"/>
</video>
The problem with this, though, is that it only plays one video, and if I want to add more parts to it, I have to edit the video itself, rather than just popping a new file in the folder.
I saw another question answered that mentioned doing this with javascript, but the whole point of this project is to make it exceptionally easy and quick to update. The main thing I'm looking for here is for us to be able to update the page by opening a file in notepad, adding a line of code, saving, and running it.
Any thoughts? Even just a pointer on what commands might be useful here would be helpful. Thanks in advance!
As far as I know you won't be able to do this with the inbuilt html5 video players native to the browser, It's just not the principle on which they are built.
What you are looking for is more of a media playlist style set of features.
You will have to use one of the javascript based html5 video players to get some of these features but even then I'm not sure of the support for swf and image files I've seen a few which do various videos and audio files but nothing HTML5 which also does swfs also as again, the premise of these players is usually to eradicate flash.
My best suggestion for doing all of these in one single embed is to use flash via the longtail/jw player or flowplayer which handles playlists etc or perhaps slideshowpro which I know does both images, video and I think audio too.
Finally.. harking back a decade or so. theres a Language which is pretty underused and suffers varied support called SMIL which supports all of these elements you mentioned however it's uptake sort of fell apart with the introduction of video in flash. I remember that Realplayer and Quicktime could serve SMIL files but I'd be pretty cautious to do anything in SMIL these days.
Hope that helps.
A