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.
Related
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.
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.
We have a 300 by 250 on the right rail of our site and we have about 5 customers ad rotating (jpg, gif and swf), but one of our customer would like to upload a advertisement video ad I am not sure how to set this up in google double click. Can any one please help.
Many Thanks =)
You can create Custom creative. Then insert something like this :
<a href="%%CLICK_URL_UNESC%%%%DEST_URL%%" target="_blank">
<video autoplay loop>
<source src="INSERT VIDEO URL" type="video/mp4" />
</video>
</a>
You can also upload video to dfp (there is a size limit) and use file macro.
I use videoJS to play a video on a HTML5 webpage. Everything is working well on PC (even with Safari), but on iPad (iOS 5), even if the video is playing well, I've got a problem with the size of the video – it is very small, and I don't know how to make it bigger.
I have tried adding width and height attributes and changing the default width and height in video.js.
Plus, my video is supposed to be 408px width and 520px height, and on iPad it's wider than high and there a black on each side.
How can I resolve this problem?
EDiT
#Emil thank you for your time. There is some codes :
How i include the video on my HTML page :
<video id='videoDavi' class='video-js vjs-default-skin' autoplay='autoplay' width='408' height='520' style='z-index: 1;' data-setup='{}'>
<source src="#DOSSIER_SQUELETTE/video/bub_Intro.<?php echo $extension; ?>" type="<?php echo $type; ?>" />
</video>
The "$extension" and "$type" are meant to choose the right video for the right browser. I used to use the videoJS solution (<video> <source [..]/> <source [...] /> <source [...] /> </video>) but had to change in order to make i-dont-remember-what working.
I also included on my css :
video#videoDAVI_html5_api{ width: 408px; height: 520px; }
Because i saw throught a web inspector simulator that the code on the iPad was
<video id="videoDAVI_html5_api" autoplay src="video.mp4"></video>
(+ i forgot i'm also using easySlider 1.7)
Thanks
I finally had it work on iPad.
I had this code under the <video id="videoDavi"></video>
<script>
var homePlayer=_V_("videoDavi");
</script>
and had the video-js.css (it wasn't needed for the others, i still don't understand why iPad needs it)
Now it's not working at all on Android/Chrome, but working on Android/Firefox.. But I guess I'll find why, didn't have search yet.
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.