I'm trying to embed an self hosted video into a wordpress page. This is a video hosted in the media library on the same wordpress install.
But I'm having difficulties getting the video to appear on the page, not on autoplay and with sound.
It seems to either:
appear with no play button (looks like a static image)
appear autoplaying but with no sound.
I've tried various settings on the page code to get this to appear like a regular video with a play button that's not set to autoplay but I'm stumped.
These were the settings when I came to change them
<div class="video-area">
<video width="100%" autoplay muted>
<source src="<?php the_field('video_section_video') ?>" type="video/mp4">
</video>
</div>
I then tried this:
<div class="video-area">
<video width="100%" muted="false" autoplay="false">
<source src="<?php the_field('video_section_video') ?>" type="video/mp4">
</video>
</div>
And I also tried changing the original default settings to removing autoplay and muted, but no combination of changes seems to have the effect I want.
It's either static and no option to start the video, or it plays automatically without sound. I understand browsers dont allow videos to autoplay these days with sound, but I just need it to appear like a regular video with a play button.
You are missing controls
<div class="video-area">
<video width="100%" muted="false" autoplay="false" controls>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>
For your reference: https://www.w3schools.com/html/html5_video.asp
Related
I am building a fullscreen video for my website background that is autoplay and loop all the time. it is working well, but it takes a long time (around 3 min) to load the video.
the video is 9 MB and 1280 * 720. I tried to compress the video with many online websites but still the same problem and it affects the resolution of the video.
I am using HTML5 and programming with PHP. here is the code:
<video playsinline autoplay muted loop poster="/media/video/poster.png">
<source src="/media/video/test.webm" type="video/webm">
<source src="/media/video/test.mp4" type="video/mp4">
<source src="/media/video/test.ogg" type="video/ogg">
</video>
If you know another programming technique that could help me achieve my goal, I appreciate your help.
Place the muted attribute before the autoplay attribute like so:
<video playsinline muted autoplay loop poster="/media/video/poster.png">
<source src="/media/video/test.webm" type="video/webm">
<source src="/media/video/test.mp4" type="video/mp4">
<source src="/media/video/test.ogg" type="video/ogg">
</video>
This will greatly reduce your loading time as the audio has to be muted in order to autoplay (in IOS/Safari in particular) See caniuse.
Hope this helps
I am using VideoJS to play videos on my page, how do I remove the playback controls?
I want to auto play once the page is loaded without controls, once the playback is done I want to trigger a webservice.
any ideas on how to do this?
Michael
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" poster="images/loader.gif" data-setup="{}">
<source src="test.mp4" type='video/mp4'>
<source src="test.webm" type='video/webm'>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
supports HTML5 video
</p>
</video>
http://videojs.com/
write this attribute , i think your problem will be solve
<video autoplay ...>
I know there have been quite a number of questions relating to this already, but I tried following the rest but it doesn't seem to work.
Here's one part my code:
<?php
<a href='Recordings/Marvin Gaye Lyrics by Charlie Puth feat. Meghan Trainor.mp3'>Play the music</a>'
?>
There's will be lots of hyperlink like this on the same page, the music can be played, but that's after I'm directed to the recording link. How do I stop this?
Thank you for helping in advance!
Managed to solve it..
Some things to note:
1) I am putting #dagon 's Javascript into php's echo.
2) I used button instead and hide the background of it.
Here's the code:
<audio id=\"player\">
<source src=\"Recordings/Marvin Gaye Lyrics by Charlie Puth feat. Meghan Trainor.mp3\" type=\"audio/mpeg\">
</audio>
<div>
<button class=\"link\" onclick=\"document.getElementById('player').play()\">Insert text here</button>
</div>
instead of a href, use the audio tag:
<audio controls>
<source src="Recordings/Marvin Gaye Lyrics by Charlie Puth feat. Meghan Trainor.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
version 2, play button only:
<audio id="player">
<source src="Recordings/Marvin Gaye Lyrics by Charlie Puth feat. Meghan Trainor.mp3" type="audio/mpeg">
</audio>
<div>
<button onclick="document.getElementById('player').play()">Play</button>
</div>
i've made this script:
<?php
if(!empty($dati['audio'])) { ?>
<span>
<audio id="audio_player" src="data:audio/mp3;base64,<?php echo base64_encode($dati['audio']);?>" controls="controls" autobuffer="autobuffer">
</audio>
</span>
<?php } ?>
It create an audio tag with a blob value inside..it work in every browser on pc but it won't work on some mobile browser..i've tried with external library to play audio in different way but it look like no one allow blob instead of the path of the file..someone have an idea which can help me to solve this problem?
replace data:audio/mp3 to data:audio/mpeg
This link will be useful too.
If not working. Try this onle also.
<audio id="audioFile" controls="controls" loop="loop" autoplay="autoplay" >
<source src="filename.mp3" type="audio/mpeg" />
<source src="filename.ogg" type="audio/ogg" />
</audio>
Hope it will work for you :)
Please check this screenshot.
My Code:
<video class="embed-responsive-item" id="video-play-normal" controls>
<source type="video/mp4" src="...path to video..."></source>
</video>
These videos are working fine is Chrome.