I come today with a 'fairly easy' question around using video.
I have used this before and it seems to be working on Android devices. However, I just recently realised that the same video won't work on any Apple device.
My initial thought was around the video format (which is currently MP4), so I added a 'webm' back-up. MP4 should be enough, but I just wanted to give it a try (unsuccessfully)
Am I missing something? Do I need an specific format to be able to display a video on Apple devices?
<video class="intro-header-mobile" playsinline autoplay loop muted preload="auto" width="100%" height="100%">
<source src="/medias/custom-content/projects/2021/Own-brand-hub/e0821_Ownbrand_mob_v2.mp4" type="video/mp4">
<source src="/medias/custom-content/projects/2021/Own-brand-hub/e0821_Ownbrand_mob_v2.webm" type="video/webm">
</video>
Thank you everyone!
Diana
Related
I'm trying to play a video taken with an Android phone. I want it to play in Chrome on a desktop or laptop. When I run the code, I get the video controls. When I play the video, I can hear the sound, but the video part is just empty background. I can get other videos to play just fine, but not the video from my phone. In the code below, the duration reports correctly (1.8 sec), but the height and width are reported as zero. (The test video from Big Buck Bunny plays just fine.)
What am I missing? (Yes, not a professional programmer, just a HS physics teacher...)
<html>
<body>
<video width="400" controls id="theVideo">
<source src="https://noragulfa.com/random/movie3.mp4" type="video/mp4">
<source src="http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_30fps_normal.mp4" type="video/mp4">
</video>
</body>
<script>
document.getElementById("theVideo").addEventListener('loadedmetadata', function(e) {
console.log(this.videoWidth, this.videoHeight, this.duration);
});
</script>
</html>
The video (movie3.mp4) contains a HEVC/H.265 (1920x1080#30fps) video stream.
Most browsers currently do not support HEVC/H.265. At the time of writing, only Safari does have support. Edge can also play HEVC/H.265 if the device has hardware decoding.
Please consider using AVC/H.264, VP8 or VP9 instead. For future reference, AV1 would also make a great alternative but support is currently not that great yet.
Your code is perfectly fine and working, The problem is with the video source that you are using, as you can see in the below code, I just replace your video URL with another URL and it working fine. the best solution would be to change your video source.
<html>
<body>
<video width="400" controls id="theVideo">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>
</body>
<script>
document.getElementById("theVideo").addEventListener('loadedmetadata', function(e) {
console.log(this.videoWidth, this.videoHeight, this.duration);
});
</script>
</html>
You can you any free sites to host your video if you want, and use that URL to your code or maybe try to find another Url of the same video online.
I encountered a problem while trying to use a background video on mobile. Everything works just fine on Chrome and Opera but whenever I try to open the webpage on firefox for android it won't start. It's there but autoplay won't start for some reasons. Can you help me figure out why?
<video width="100%" height="100%" autoplay muted loop>
<source src="images/ECLYPSODark_Side.mp4" type=video/mp4>
<source src="images/ECLYPSODark_Side.ogv" type=video/ogg>
<source src="images/ECLYPSODark_Side.webm" type=video/webm>
</video>
I found a solution to it. If you put the video on mute it autoplays, otherwise it doesn't!
I am using xamarin.forms webview and have implemented video tag in my html5 code to play video.
I test it on IOS and Android. None of both play the video. What I am doing wrong?, I read on some SO set hardware acceleration. Someone please help me how this thing work.
Testing code for playing video
<p>testing from 3:49</p> <video width='320' height='240' controls> <source src='https://www.w3schools.com/html/mov_bbb.mp4' type='video/mp4'> Your browser does not support the video tag. </video>
<p>testing from 3:49</p> <video width='320' height='240' controls> <source src='https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm' type='video/mp4'> Your browser does not support the video tag. </video>
What is wrong in my case is I have isEnable property false in WebView. After set it True, it's working fine.
If you still have some issue, try to enable HardwareAccelerate in Mainfest of Android app.
I've been trying to make a html5 video to work in IOS and Android with
Autoplay
Loop
No controls
I found a lot of codes out there and tried them all but I can't get it working
This is the best I've got:
<video autoplay="autoplay" controls="" id="video" loop="true" style="display: inline-block;margin:0;padding:0;">
<source src="timelapse_panoramic_fin_5.webm" type="video/webm" />
<source src="timelapse_panoramic_fin_5.ogv" type="video/ogg" />
<source src="timelapse-panoramic-fin_5.mp4" type="video/mp4" />
</video>
I think that it will be very hard to get this working properly. What other option do I have to HTML 5 video?
Use webview.
WebView webView=(WebView)findViewById(R.id.webview);
String html="you html code for video";
webView.loadData(html);
As you already experienced, video playout across different platforms and browsers can be hard. I would definitely recommend to use a player framework, like Video.js, or in context of adaptive streaming, Bitmovin player, etc. They can make your life much more easy.
I try play a video in html5 page on Android emulator 0f version 4.0, and I found that the screen
is black(can not show the video picture) and the audio play normally. I have searching the Internet for a couple of hours, still I can't get the answer I want. Can someone tell me reason or the solutions? By the way, I'm sorry for my poor English. Code is listed as below:
<div id="CHPlayer">
<video id="video" usemap="#Map" poster="./sources/1/t2.jpg" xmlsrc="./sources/1/t2.xml">
<source src="./sources/1/t2.mp4" type="video/mp4">
</video>
<img id="insertBar" src="./sources/1/t2.jpg" usemap="#Map" />
</div>
Does your video fit under the android requirements? Take a look at: http://developer.android.com/guide/appendix/media-formats.html
Also check under the initial grid for the encoding requirments.
If it is compatible then you also may have to make sure it isn't the emulator.