Media-Talk
Summary: Talk page for improving Media
Video Tip
Having a border around a video is visually helpful when the
video background color is the same as the PmWiki page color.
This can be done inserting 2 lines in your pub/css/local.css
file or your pub/css/farm.css file. Note that a border is not
necessary when the video is fullscreen.
PmWiki page markup:
http://localhost/z/uploads/Slaughterbots.mp4#x320;class=videoframegraysilver
CSS:
video.videoframegraysilver { border: 1px solid #CCCCCC; }
video.videoframegraysilver:fullscreen { border: none; }
--gnuzoo
To style all videos, no need for a custom classname, try just this, in CSS:
video { border: 1px solid #CCCCCC; }
video:fullscreen { border: none; }
In a wiki page:
Attach:video.mp4#x320
BTW the default classname is pmmedia if you don't define a class= in the hash fragment. So for PmMedia videos, you may want to add CSS for video.pmmedia --Petko
> Why not style all videos, no need for a custom classname
Because not all videos want the same color, thickness, and a million other CSS properties.
A custom classname can be mnemonic which is an efficient way of pseudo-self documenting,
like using strong mnemonics in variable names.
--gnuzoo
This is reasonable, I amended my tip. --Petko
Poster only work with "Attach:"
Documentation updated, new feature discussion moved to PITS:01569.
Links
Authors can add an image to a link. Can you make it so authors can add a video to a link.
[[HomePage|Attach:logo.mp4#60x60;controls=0;loop;autoplay;mute]]
--gnuzoo
Such a feature may be better left to be implemented by a recipe, this way we could see how popular it is before increasing the complexity of the core and taking from my limited spare time. --Petko
Class
Playing video with the built in media player is GREAT,
way way way better than I ever expected.
> class=vertical - Add a CSS class name (a single one).
Why only 1 class? Can you please allow the user add more than one class?
HTML allows that. Cannot be too difficult to parse.
Example:
class="classname1 classname2 classsname3"
---gnuzoo
No plans to support this. You can add as many styles as you want to your classnames in your CSS files, do you need assistance with this? Another way is to wrap the video in a wikistyle like %classname1 classname2 classsname3% Attach:video.mp4 %%
and in the css define .classname2 video {...} instead of video.classname2 {...} -- your creative options are without limits. --Petko
I find this does not work.
%classname1 classname2 classsname3% Attach:video.mp4 %% |
It puts the class on the span element before the video,
not on the actual video element in the HTML.
--gnuzoo
It should work exactly like that, a <span> element wrapping the <video> element. Then to style the video, you define the styles in .classname2 video {...}. --Petko
But adding the class="classname" to the mp4# parameter adds the classname to the video element.
Makes my CSS is simpler because all I have to do is reference the classname in the CSS.
.videoframegraysilver { border: 1px solid #CCCCCC; }
I dont want to do anything to the span, I dont care about it, I only care
about the media. I dont even know why the span is there, I did not tell it to
put a span there. Its simpler. Why limit it to one class?
Spread your wings and fly.
--gnuzoo
The span is there to allow you to define multiple classes to style video tags. I already explained how to style a video inside a span with a classname. If you want to give a classname to the video tag, write your combined styles in the CSS classname. The functionality you need already exists. Please take the win and let's leave it at that. --Petko
Silence
Option 'mute' allows a user to unmute while media is playing.
Can you add an option to have no audio at all and not allow someone to unmute it?
I have a short video with very annoying sounds and no one would want to hear it.
I want to play the video, but not allow any audio with it.
Option 'audio' plays only the audio portion of a video file.
How about an option to play only video with no audio?
"videoonly" "noaudio" ??
--gnuzoo
You can remove the audio track before uploading, try ffmpeg -i input.mp4 -c copy -an output.mp4 --Petko
Are you saying adding "noaudio" option is impossible?
--gnuzoo
There is no such option, attribute, or argument, in the HTML5 standard for video tags, or in current browser implementations of it. Adding an option "noaudio" will not achieve what you describe. --Petko
🦸♂️ Super Petko to the rescue again!
I tried an online free tool to do this, the video file returned was over 5 times larger.
They also put their "watermark" in the lower right corner of the video. Intolerable.
I did get ffmpeg to remove the audio from the mp4 file. It sure puts a lot of
text output junk on the screen, view that here: ffmpeg output
Is all that text an error message? It is overwhelming.
--gnuzoo
No. --Petko
YouTube
> The plan is for PmMedia to some day embed videos from YouTube and Vimeo, like Ape, but with better GDPR compliance.
I think this is a good idea. Playing a youtube video in pmwiki would be simple as pasting a URL https://www.youtube.com/watch?v=te1fHMaw4UY . How about enabling this and make the GDPR better later?
Also, $PmMedia['EnableEmbed'] = 1; should be a default setting. If someone hates video, make them
go to the config file and turn it off. Most would prefer video automatically enabled.
--gnuzoo
For wikis without media links this would be reasonable but for wikis that currently have links like Attach:video.mp4 or Attach:song.mp3, upgrading with the default changed would modify their existing pages. I prefer not to do this and let them opt in if they want. --Petko
Can you please provide an ETA when this plan/feature will be available?
--gnuzoo
No ETA. I develop and maintain this project in my spare time, and I don't commit to timelines for volunteer work. --Petko
Positioning & Dimensions
Are the dimensions including the controls, or are they just the video
part of the media? Does it add height to the video area when controls
are visible?
Margin on top the video is huge. It appears to wrap the entire video in
an HTML P element, the blank top margin of the video appears to be as high
as the controls at the bottom.
How can we adjust (CSS 🙁) this so the top left corner is the top left of the video?
(:comment 4 second video:)
> uploads/2_Rockets_Landing.mp4#640x480
When the specified dimensions are "#640x480" I thought it would keep everything in a
box that size and not have a huge margin at the top.
Could you allow testing this in the GNUZoo group with a short video?
--gnuzoo
Media enabled in your group. Look at the HTML source of the page to see what happens. Type the dimensions that you want to appear in the width and height attributes of the video tag. Define just one of the dimensions and the browser should calculate the other proportionally. If the box proportion WxH is not the same as the video WxH, the video frame will be scaled and centered within a box with the dimensions you defined. The controls are overlayed at the bottom of your box -- yes, the dimensions include the controls but these are overlayed -- move the mouse out of the video and the controls will disappear after a few seconds. Browsers define the video element and controls differently, feel free to investigate whether CSS can be applied for your needs. --Petko
WOW! I goofed. I did not know the original resolution of the video.
There is no extra space at the top. It just works!
🦸♂️ Super Petko to the rescue again!
--gnuzoo
I've added styles for responsive videos, so that if the video is larger than the available width, it is scaled down keeping the aspect ratio. Incidentally, this causes a defined wrong height to be ignored and to not have margins as described. Simultaneous termination of two independent avian organisms through the application of a single kinetic mineral projectile. --Petko
Let me translate that last sentence from unnecessarily clinical forensic sounding language: Two birds with one stone.
Never seen you crack a joke before! 😂
--gnuzoo
Wording
Double negative was fixed, suggested by Simon.
Other improvements
I'd also welcome other improvements to the options, in the same spirit (intuitive as practical, with less markup to write for writers). --Petko
This is a talk page for improving PmWiki.Media.