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.
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.
I am newbie JS and Wordpress user/developer.
I want to play an audio in background when a page loads. Also, would like to pause the same audio if I click few set of buttons.
I tried using plugins (obviously being a noob), however I can get a sound bar, and a play pause button. But, cannot connect set of buttons to the action.
How to do I achieve this for events like on load or on click?
Pause button:
<button onclick="pauseAudio()" type="button">Pause Audio</button>
Audio:
<audio controls>
<source src="audio.ogg" type="audio/ogg">
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
JS Script:
var audio = document.getElementById("audio");
function pauseAudio() {
audio.pause();
}
audio.play();
I think the code is all pretty straight forward. Basically, you get the video element, and just run .play() on it. Add to a button's onclick pauseAudio() which will run the function and pause the video.
Hope that helps!
Or...
<button onclick="document.getElementById("audio").pause();" type="button">Pause Audio</button>
and on the <body> tag:
<body onload="document.getElementById("audio").play();">
Something similar to that should get you going!
This works for videos or audio, I've update this to be more for audio, though the premise is the same.
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.
When I place a link on top of the HTML5 Video Tag. This will work on Safari, desktop browser, but on iPad and iPhone I can't click on it what so ever. Does someone know a work around for this?
<div class="video-wrapper">
<video id="mainVideo" poster="resources/videos/poster.jpg" controls="controls">
<source src="resources/videos/video.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
<a id="example" href="javascript:alert('ok')">Hello World</a>
</div>
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).