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.
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'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.
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.
The old way to allow audio to be played/streamed in the browser was a flash button, such as that seen on www.irish-sayings.com .
What's the new iPhone-friendly way to give the ability to click on a simple button to listen to an audio file in the browser?
If the answer is HTML5, is the such a button built and available? I don't need an MP3 player with steaming and such, only a button.
You just need to use the audio tag.
<audio controls="controls">
<source src="song.mp3" />
<!-- You can include some fallback for browsers that do not support this -->
</audio>
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).