I have a video on this page:
https://job.id/2044/telemarketing-executive-kota-bekasi
On all devices & browsers it works fine except Google Chrome on Android. The poster image does not show. Any suggestion how to get poster image to show?
Videojs viewed using Chrome on Android
Videojs viewed using other browser on Android
The video emdedded as:
<video id="video-1"
class="vjs-tech"
preload="auto"
data-setup="{fluid: true}"
poster="https://d1gajg4ezrqrup.cloudfront.net/live/video/advertiser/1/6/thumbs-cce3c4bb-9b00-4af9-8cb0-07b07201886c-00001.png">
<source src="https://d1gajg4ezrqrup.cloudfront.net/live/video/advertiser/1/6/mp4-cce3c4bb-9b00-4af9-8cb0-07b07201886c.mp4" type="video/mp4">
<source src="https://d1gajg4ezrqrup.cloudfront.net/live/video/advertiser/1/6/hls-cce3c4bb-9b00-4af9-8cb0-07b07201886c.ts" type="video/hls">
<source src="https://d1gajg4ezrqrup.cloudfront.net/live/video/advertiser/1/6/webm-cce3c4bb-9b00-4af9-8cb0-07b07201886c.webm" type="video/webm">
<p class="vjs-no-js">
blah..
</p>
</video>
Try below.
data-setup='{"fluid": true, "aspectRatio": "16:9"}'.
It's fixed in video.js 5.13 (per-release), but here fluid mode is collapsing the player on Android on cellular networks because Chrome overrides preload to node.
Had the same issue. In Chrome the poster would flash for a split second and then disappear. Fixed it by setting preload to false: preload="false"
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.
Autoplay option using below code works fine in all browsers on all devices except Android Firefox browser
<video onload="this.play();" controls autoplay muted loop>
<source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.webm" type="video/webm">
<source src="https://storage.googleapis.com/web-dev-assets/video-and-source-tags/chrome.mp4" type="video/mp4">
<p>Your browser cannot play the provided video file.</p>
</video>
Tried below options but none of them working
autoplay = "1" , autoplay = "autoplay" , autoplay = "true" for video option
Same issue using object and embed tags (only video background appears but not autoplay)
On load method has no effect in android browser
No issues on chrome and Safari browsers
Codepen url for reference- https://codepen.io/nagasai/pen/mdEZabp
On Android Firefox Autoplay is controlled by the user in the settings under 'site permissions' and the default is 'Block audio and video'.
You can test this with your codeine example above by:
load your codepen link on dedfault settings and video will not play as you observed.
Got to option dots at the right of the URL bar, select 'Settings', then 'Site permissions', then 'Autoplay'
Change the setting to 'Block Audio only'
Exit settings and reset your codepen link and you video should autoplay now
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 am developing an android application using Cordova. I used HTML <video> Tag for a background video. The Video works like a charm for Lollipop OS. But it doesn't work for Kitkat 4.4.4. I have tried all formats of video(mp4, webm, ogg). It gives me a black screen background. The poster which I am setting just in case video doesn't work is not getting displayed either.
<video autoplay loop poster="images/landing.jpg" id="bgvid">
<source src="videos/small.ogg" type="video/ogg">
<source src="videos/small.webm" type="video/webm">
<source src="videos/small.mp4" type="video/mp4">
</video>
Is there any alternative to this? How to make the video work as background for majority of Android OS.
You can use the plugin Html5Video
cordova plugin add https://github.com/jaeger25/Html5Video.git
HTML:
<video id="videoID" loop>
</video>
JAVASCRIPT (When cordova is initialized):
window.plugins.html5Video.initialize({
"videoID" : "video.mp4"
}, function () {
window.plugins.html5Video.play("videoID")
});
ANDROID PROJECT:
Created a folder called raw on platforms\android\res\raw
Moved the video to platforms\android\res\raw\video.mp4