The video works fine on my pc, but for some reason, I can't play it on my site. It shows the control buttons, and even the time starts running, but there's no video:
The code on my page:
<video width="100%" height="auto" controls>
<source src="/videos/aquaflow__video.mp4" type="video/mp4">
</video>
The video is located at: app/public/videos/aquaflow__video.mp4
Is there something I'm forgetting?
Related
I'm trying to play a video in the header of a site. I added the video to the assets folder and using the code below, the video will load but when I press the play button, the controls shows the counter counting but there is nothing playing. I can even download the video and it will play. Autoplay is also not working. Here is my code for the video.
<video width="320" height="240" autoplay>
<source src="../../../assets/Denver-judo-practice-1080.mp4" type="video/mp4">
Video tag is not supported in this browser.
</video>
I also tried the following codw with the same result.
<%= video_tag "Denver-judo-practice-1080.mp4", width: "80%", controls: :controls, autoplay: :autoplay, loop: :loop %>
What I'm ultimately looking for is a vdieo that plays when loaded but pauses when the user scrolls down but my first issue is the get it to play at all.
I'm working in an interactive e-learning game and I have several scenes, most of them with audio, video or both. The issue happens when I'm on IPAD and I'm in a scene that contains HTML5 video and I click back to a previous scene that contains audio, the audio will be distorted.
import chime from '../../audios/chime.mp3'
this.callerObj.audio('chime', chime)
this.callerObj.chime.play()
The video is like this:
<div tabindex="0" class="plyr plyr--full-ui plyr--video plyr--html5 plyr--pip-supported plyr--fullscreen-enabled plyr--captions-active plyr--paused">
<div class="plyr__video-wrapper">
<video id="lesson1p1" preload="auto">
<source src="whiteboard_background.mp4" type="video/mp4">
<source src="whiteboard_background.webm">
</video>
<div class="plyr__poster"></div>
</div>
<div class="plyr__captions"></div>
What can be corrupting the audio?
Is there any way to avoid this?
Well after checking some comments I tested this and it worked.
The issue is related to the audio manager and how it gets handled by the Html5 video.
this.item = document.getElementById('videoItem')
if(!!this.item){
this.item.src = ''
this.item.load()
}
After this I was able to play the clean audio
I have fullscreen video background, here is my code:
<div id="video-container">
<video id="video" autoplay loop>
<source src="ocean.mp4" type="video/mp4">
<source src="ocean.ogv" type="video/ogg">
<source src="ocean.webm" type="video/webm">
</video>
</div>
how you see it has autoplay attrubute, but on IPAD, IPHONE,etc.. it doesn't work untill you click on play button, but when I add poster attribute for poster image it works:
<video id="video" poster="poster.jpg" autoplay loop>
But I don't want with poster. Also I tried to use this js code but no result:
function startVideo(){
var myVideo = document.getElementById('video');
if ((myVideo.playing) || (myVideo.currentTime > 0)) {
// video is already playing
} else {
myVideo.play();
}
}
window.document.body.onload = startVideo;
I guess auto-play feature is not supported in iOS. Check this Apple documentation:
User Control of Downloads Over Cellular Networks
In Safari on iOS (for all devices, including iPad), where the user may
be on a cellular network and be charged per data unit, preload and
autoplay are disabled.
Here is the documentation link
I am working for a client who wants to have audio work on iPhone so I decided to convert his files to mp3/ogg and use HTML5. There are 4 audio files and although I used the same software for conversion 2 of the files do not play on the webkit browsers. The play button is faded and the volume button has a diagonal line over it.
<audio controls>
<source src="index.ogg" type="audio/ogg">
<source src="index.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
i created a small website that includes a video with this code:
<video autoplay="autoplay">
<source src="inc/WEB_MASTER.mp4" type="video/mp4">
<source src="inc/WEB_MASTER_ios.m4v" type="video/mp4">
Your browser does not support the video tag.
</video>
When i load the page via my iPhone the video starts playing, but it does not play it in the part of the website, instead the iphone plays the video in fullscreen. How can i force the iphone to play the video in the respective area on the website?
Thanks.
The iPhone and iPod seem just about the only devices/browsers that force fullscreen video playback in Safari (and in apps that make use of its unmodified WebView)
You can work around this issue by simulating the playback by skimming the video instead of actually .play()'ing it.
I wrote a module that takes care of playing the video inline and synchronizing it to the audio (but it also works on videos without a sound track): iphone-inline-video
This question is answered here:
HTML5 inline video on iPhone vs iPad/Browser
Just add the webkit-playsinline attribute to the video tag. Works in iOS 4.0 and later:
<video id="player" width="120" height="60" webkit-playsinline>
Here is the official documentation for webkit-playsinline.