On my website (ryancreason.com) my VideoJS player at the top of the page works to play Youtube videos with YouTubeJS, unless I'm on my mobile device (android). The loading icon happens, but the player just stays blank. I've tried searching for a reason & fix, but to no avail. Any ideas? Here is the code for my player:
<video id="videoSamples" class="video-js video-js-small vjs-default-skin" autoplay muted loop preload="auto" playsInline quality="" width="100%" height="auto" data-setup='{ "techOrder": ["youtube"], "src": "https://www.youtube.com/watch?v=nNpg1LD1t_Y" }'>
</video>
Thanks in advance for any advice!
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 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
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!
Homepage of my moms website, if you open in browser and use console to see the mobile version you will see the video playing... but when you use your actual phone and type this website there is nothing... not even a frozen thumbnail ....... like what the actual functionality ??
Please help I'm so frustrated.... no errors no nothing......
<div class="mobileVideo">
<video id="video" playsinline autoplay loop muted width="auto" height="auto"
preload="auto" style="display:block;" autoplay="autoplay">
<source src="" type="video/mp4">
<source src="https://kavitacijabeograd.com/wp-content/uploads/2020/03/Mobile-Kavitacijabeograd.m4v"
type="video/ogg">
</video>
</div>
Conclusion,
type="video/ogg" is showing while inspecting the page and the video on PC google chroom,
but when you open website on actual phone, video is not showing unless type is video/mp4
hope it helps some1
I have enabled controls in my video tag so that users can unmute the video when it is playing on Desktop, the issue I have having is that on Android it continues to play muted with control option to unmute, also on iOS, it plays unmuted by default.
My code is:
<video id="player" width="430" height="236" style="position:absolute; top:7px; left:52px;" poster="movie.jpg" muted autoplay controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogv" type="video/ogg">
<img width="430" height="236" style="position:absolute; top:7px; left:52px;" src="movie.jpg" />
</video>
I can't find any answer anywhere. Desktop works fine.
on iOS devices you can't mute or change volume HTML video (:
http://blog.millermedeiros.com/unsolved-html5-video-issues-on-ios/