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
Related
I moved over to VideoJs (html5) and need to figure out how to generate thumbnails for the seekbar. I have tried using videojs-thumbnails, however that requires having a preloaded vtt file with a sprite image. I'm trying to figure out a way to automatically load thumbnails for a regular mp4 (h264) file. Flowplayer was able to do this with it's own videos, trying now to figure out how to do it with VideoJs.
I was hoping their was some plugin that I missed that was capable of doing this, but have yet to find it. The best I figured out was to extract the thumbnails from the mp4 file, combine it into a sprite image, and use the #xywh attribute.
If there is no plugin that automatically does this in VideoJS, what command line program can I use to create a VTT file with sprite image on Ubuntu? I am dealing with lots of video files, so doing it manually just isn't feasible.
My video player:
<div class="video_player_js" style="width:auto; height:auto;">
<video id="video" class="vjs-16-9 video-js vjs-default-skin vjs-big-play-centered"
controls preload="auto" width="auto" height="auto"
data-setup='{"fluid": true}'>
<source src="test.mp4" type="video/mp4" />
<track kind="metadata" src="thumbnails.vtt"></track>
<p class="vjs-no-js">To view this video enabled Javascript.</a></p>
</video>
Sample vtt file:
WEBVTT
00:00:00.000 --> 00:00:03.000
thumbnails.jpg#xywh=0,0,120,68
00:00:03.000 --> 00:00:06.000
thumbnails.jpg#xywh=120,0,120,68
00:00:06.000 --> 00:00:09.000
thumbnails.jpg#xywh=240,0,120,68
In fact, there IS a VideoJS-based plug-in for displaying thumbnails that was done by BrightCove. See here on GitHub:
https://github.com/brightcove/videojs-thumbnails/blob/master/example.html
The base-poster here seems to favor generating the images in real-time
and notes the following:
"The only real issue is that the user has to wait a couple of seconds before the video is ready to be watched."
Unless I'm missing something, it should be preferable and straight-forward to generate the needed VTT-file (of the thumbnail-image info) offline.
EDIT: Choosing to do the extraction offline has the additional advantage
that the robust tool 'ffmpeg' seems to be the clear choice. (After evaluating the suggested and immature 'mtn' tool, I rejected it because I could never manage to prevent it from skipping/omitting shots .)
EDIT: BrightCove has nice example code and explanation, including how to
do things more efficiently using video 'sprites'. See here:
https://support.brightcove.com/display-thumbnail-previews-plugin#Example
EDIT: [I am planning to develop such an example, and will update
this answer when I complete that effort...stay tuned.]
EDIT: I finally completed my approach to implementing 'thumbnails' for a video... it is here:
https://weasel.firmfriends.us/Private3-BB/
Surprised I didn't get a single comment/answer. Either way, after taking quite a few days I was able to find a working solution. At first I thought the solution would be using ffmpeg, however while it did work it was drastically slow. I eventually found the linux tool (available in Windows as well) called mtn (Movie Thumbnailer) found here. This tool was able to to create a sprite image from a two hour movie within about 6 seconds. I used the shell_exec function in php with the -v (verbose) option in order to parse out the time of each thumbnail as such:
mtn -v -P -s 60 .jpg file.ext 2>&1
Once there, it was simple logic, parsing, and math to create the necessary WebVTT file. All of this was done in php natively with the exception of having to use mtn with shell_exec.
This solution works great and is pretty accurate. The only real issue is that the user has to wait a couple of seconds before the video is ready to be watched. I am currently looking at options to load the video first, generate the thumbnails in the background, and incorporate it into the video source once ready.
I hope this solution helps anyone else out there that needs to dynamically generate thumbnails for their video player.
For a small website I am creating, I have an embedded piece of audio which plays on the landing screen, the current method I am using is just by simply embedding it via standard html:
<audio autoplay loop id="player" src="audio1.wav"></audio>
The issue with this method is it is possible to find and download the src when looking in devtools. I want to mask the src so nobody can find it and download it, as the audio is up for sale/copyrighted.
Is there a method where the original .wav audio file cannot be traced back and downloaded?
There's no real way to prevent someone from obtaining the audio in one way or another if they're determined enough. However, a few alternatives are listed here, with some more concrete code examples here. Consider only playing a small sampler to prevent someone from getting the entire audio clip.
can i change the video quality and bitrate of a video(with video tag) on my website using javascript or i have to make some copy of the video with a different quality?
Thanks.
There is a project which compiled ffmpeg to javascript to allow videos be manipulated and converted in the browser:
https://github.com/bgrins/videoconverter.js
It was originally developed as part of a Node Hackathon, but its not clear whether it is still maintained (see the GitHub activity).
Its worth nothing that it is probably more of an experimental project that a practical one, because of the very large file size.
First ask yourself "is it realy needed to selfhost my video?"
Video plattforms like youtube or vimeo are faster and would bring this options with them.
I am working on a project related to vintage web designs. I would like to embed and autoplay a midi file but:
It doesen't work on IOS (I tried with my ipad)
On Firefox, sometimes the tune is not played, I don't know why.
Does the midi player depends on the browser or a plugin?
Can I find a univeral alternative to play my tune?
I am using the <embed> tag this way:
<embed src="tune.mid" hidden="true" autostart="true" autoplay="true">
I've referenced this question before and fell upon the answer of using the library midijs.
However, since that lib now has a bitcoin miner included, I've made a variant without the mining code:
https://kitchwww.github.io/midi/midi.js
It can be included and used in exactly the same way:
<script type='text/javascript' src='https://kitchwww.github.io/midi/midi.js'></script>
<a href="#" onClick="function(){
MIDIjs.initAll();
MIDIjs.play('path/to/yoursong.midi');}">Play My Song</a>
EDIT: updated to include an init function to be called on a User Gesture, as all audio must now be initiated from one.
Yes, the embed tag is reserved for plugins, which Mobile Safari doesn't support.
Take a look at HTML5 audio tag, which is supported by most browsers.
But please don't play music on a webpage... it's annoying - most either listens to music, have the speakers turned off, or are at the office.
Your HTML is OK. The problem is that some lower class browsers have lost the ability to play midi files. They have to install an add on. Real Player used to be a good solution, but now they are pushing a cloud subscription. There are plenty of other midi players around, but the users have to install one.
Browsers dropped support for playing MIDI files natively over time. You might want to try MIDI.js, a JavaScript based cross browser library.
Add the MIDI.js script to your webpage:
<script type='text/javascript' src='http://www.midijs.net/lib/midi.js'></script>
And then add a link to start playing:
Play My Song
Take a look at http://www.midijs.net for details.
For mid, and kar files, I suggest using vanBasco midi player as your default player. See the source on http://midkar.com/blues/blues_01.html
To Embed;
embed src="musicfile.mid" width=144 height=60 autostart=true repeat=false loop=false
(replace the "musicfile.mid" with the name of your midi file)
Use the HTML5 Audio tag. But like The guy before me said.... please reconsider music on your page.
<audio src="example.midi" preload="auto" autoplay="autoplay"></audio>
Well, here it is Aug 13, 2017 and don't you know embedding a bg midi on a web page is still a mystery.
In fact I'm pretty certain it can't even be done anymore (except IE's bgsound src, which still works fine for me).
But as for Firefox and Chrome, the solution provided by jofeu is a great work-around.
I only wish there was a way to embed so the midi just starts playing on page load, without having to click anything. I guess those days are gone.
Using embed to embed music might sound oldschool, but I don't have any other choice (any method used now doesn't accept my files).
<embed hidden="true" volume="10" src="/app/upload/1287860161768038.mp3" />
Music starts to play, but volume is always 100% (not 10 like here). I don't know how to repair it, suggestions?
The player that is going to be used will be whatever player is installed on the system to handle mp3 content so results may be a bit random.
Yahoo and several others have javascripts that make embedding mp3 a lot easier, you don't need to go through the troubles of having the right plugins installed.
http://mediaplayer.yahoo.com/
http://code.google.com/p/mp3player/
Type= can be used to control which player and which controls
TYPE="application/x-mplayer2" would normally be Windows Media player
TYPE="audio/mpeg" would normally be quicktime.
Using a script removes these browser vs browser headaches.
It appears from something that I just read, that if you want to set the Audio Volume to 10%, then the correct 'amount' would be 0.10
http://www.w3schools.com/tags/av_prop_volume.asp