I want to add a video in my github portfolio, I do it by using
(The mp4 file is saved in files folder)
However, the video was not being displayed in Chrome/Edge, but works fine in Safari.
The I tried directly dragging the video into the markdown, it was showing in the preview mode, but would display only a link in all the browsers.
How should I fix this?
add this theme hugo-video
get the theme
git submodule add https://github.com/martignoni/hugo-video.git themes/hugo-video
edit config.yml
theme: ["hugo-video", "my-theme"]
use it
{{< video src="sample-video.mp4" >}}
OR
try this blog
its adding a shorthand video in hugo in layouts/shorthand/video.html
which makes use of JS video player library clappr to create a player given the URL of the video file
layouts/shorthand/video.html
<div class="container">
<div id="player-wrapper"></div>
</div>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/#clappr/player#latest/dist/clappr.min.js"
>
</script>
<script>
var playerElement = document.getElementById("player-wrapper");
var player = new Clappr.Player({
source: {{ .Get 0 }},
mute: true,
height: 360,
width: 640
});
player.attachTo(playerElement);
</script>
then in your post where you need the video you can do
this is my video
{{< video "video.mp4" "my-5" >}}
both get the task done in similar fashion! former uses a video html tag and is clean in my opinion, latter uses a JS library and feels like making a little bit of mess.
Because the Markdown specification varies from platform to platform, video support can be inconsistent. The simplest solution is to use an HTML video tag instead:
<video src='/files/recording.mp4' />
This has the added benefit of allowing you to set the styling with HTML/CSS.
Related
I'm trying to play a video in Jupyter books and I must be missing something.
This works...but it just auto-plays without controls and without the ability to stop it (unless one clicks and then it opens up with controls)...but it's not obvious to the user that this is a possible action:
{figure} ../_images/relativity/train_simultaneous.mp4
---
width: 60%
figclass: margin-caption
alt: My figure text
name: train_simultaneous
---
The very weird problem of the famous magnet and coil demo. Think hard about this.
If such functionality is not yet working (I think I saw that elsewhere), I don't understand why raw HTML would not work:
<video width="500" poster="../_images/relativity/train_cover.png" controls>
<source src="../_images/relativity/train_simultaneous.mp4" type="video/mp4">
</video>
</center>
That just sits there with a video start button. Clicking on it gives a frame, but for a zero second long video, so it's not loaded at all. I know this is a perfectly fine video source html as if I upload it to a server:
<video width="600" controls>
<source src="https://qstbb.pa.msu.edu/storage/QSBB_videos/relativity_temp/train_simultaneous.mp4" type="video/mp4">
</video>
</center>
...it works fine. The only difference is a local file versus a hosted file.
Ideas? I thought raw HTML would always be respected? (It is in bookdown and RStudio, which is what I'm converting from.) I've tried this with multiple acceptable video clips. All mp4.
Somehow the html video tag seems to be buggy in iOS 8 (UIWebView). There is no way to focus the "play" button on the video image. It always looks like that:
If we run the exact same code in iOS 7.1, it looks like that:
The HTML we load into the UIWebView looks like that:
<html>
<body>
<video style="width:100px;height:100px;" controls="" poster="http://goo.gl/Rz0Tkv">
<source src="/tmp/2f4194b4-cabd-4c34-9f34-78561b8a900f.mp4" type="video/mp4" />
</video>
</body>
</html>
We found no way to resize that play-button. Height/Width in CSS, direct HTML, even put the whole video-tag into a div and style this had no effect.
It's also interesting that in iOS 8, the poster-tag is necessary for a video, otherwise there is no thumbnail (in iOS 7, there was by default a thumbnail of the video).
Looks to me like a bug, do you have an idea for a quick workaround? Besides opening a ticket at apple ofc...
Update
It seems to be the same problem for the iframe tag.
I'd like to load a video to play on desktops and tablets, but prevent it from loading on iPhones because it's just a graphical element.
Here's my code:
<video width="980" height="400" poster="/poster.jpg" autoplay loop>
<source src="/images/front.mp4" type="video/mp4">
<source src="/images/front.webm" type="video/webm">
Your browser does not support the video tag.
</video>
How can I tell iPhones to not load the video but just display the poster frame?
Thanks.
Something like this should work:
<script>
var videoElement = document.getElementsByTagName("video")[0];
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
videoElement.parentNode.removeChild(videoElement);
videoElement.pause();
}
</script>
This assumes you only have one video element on the page.
Also, be sure to put the JavaScript before the closing body element or put it in an external JavaScript file.
when I use the HTML5 <video> element in the iPhone iOS Safari browser and I click on the placeholder it in order to play the video, the full-screen video player is started...
The problem is that especially when user is connected over GPRS/EDGE bearer it takes some time until the video can be started (something must be cached...).
If the user meanwhile presses the "Done" button and returns back to the page and then tries to launch the video player again nothing happens until some part of the video is cached and from user point of view it looks like the video link does not work... Is there any way how to deal with it? Listening for some event, etc.
<html>
<head>
<script type="text/javascript">
function playvideo()
{
var elem = document.getElementById("id-video");
elem.play();
}
</script>
</head>
<body>
<video
id="id-video"
width="200"
height="160"
src="space.mp4"
>
</video>
<input type="button" value="HTMLPlay" onClick="playvideo()"/>
</body>
</html>
BR
Petr
The only thing you can easily do is reduce the size of the video file. This doesn't have to effect all users, just those on slow internet connections (which you can detect this way).
I was wondering whether anyone has tried to use the new tag that comes with HTML5 on the iPhone.
Specifically, I didn't manage to make the pause() command to work.
Below is a portion of the page. As you can see, I'm trying to pause the video 10sec after it started. It works on Safari on a Mac btw.
Has anyone managed to make this work?
<head>
<javascript language="JavaScript">
function timeUpdate()
{
var myVideo = document.getElementsByTagName('video')[0];
var time = myVideo.currentTime;
if (time > 10)
{
myVideo.pause();
}
}
function addListeners()
{
var myVideo = document.getElementsByTagName('video')[0];
myVideo.addEventListener('timeupdate',timeUpdate,false);
}
</script>
</head>
<body onload="addListeners()">
<video controls src="resources/bb_poor_cinderella_512kb.mp4"
poster="resources/background.png">
Video tag not supported!
</video>
</body>
Thanks,
Ariel
This code is invalid:
<javascript language="JavaScript">
There is no HTML tag called <Javascript>
To set the language to javascript, you should use this:
<script type="text/javascript">
// Code here
</script>
Note that the language attribute is deprecated according to the W3C standard (http://www.w3.org/TR/REC-html40/interact/scripts.html) so you should use type rather than language.
As far as i know iPhone wont let you play video inline in the mobile safari browser.
So pausing wont work ofcourse. iPhone open the video in an external videoplayer, you dont have control over browser features, so the pausing doenst work.
You should use <script>, not <javascript language="JavaScript">.