I'm trying to embed a video that is stored in firebase storage like this:
<!DOCTYPE html>
<html>
<body>
<video width="200" height="200"><source src="https://firebasestorage.googleapis.com/v0/b/msp-navigator-dev-3c0ae.appspot.com/o/vendor%2FJ6j3DGJugRDtHgOQqpWP%2F1591965492214-video.mp4?alt=media&token=03525328-fb90-4733-b109-84729707234f" type="video/mp4"></source></video>
</body>
</html>
However, the video won't show. I can download the video by following the URL just fine.
What is preventing this video from showing in the HTML5 player?
Related
I am trying to play the recorded video from Red5 pro video using the html 5 controls.
I managed to do the live streaming with .m3u8 extension and i can't play the videos already recorded [Video On Demand (VOD)].
I use the video js player for playing live stream ,but the same code is not working for recorded videos.
<video id=red5pro-video width=600 height=300 class="video-js vjs-default-skin" controls></video>
Libraries
<script src="http://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="videojs/video.min.js"></script>
<script src="videojs/videojs-media-sources.min.js"></script>
<script src="videojs/videojs.hls.min.js"></script>
<!-- Red5 Pro SDK -->
<script src="red5pro/red5pro-sdk.min.js"></script>
<script src="script/hls-metadata.js"></script>
****JS Code : ****
How can i play it or could you provide me some samples if you have?
<script>
(function () {
var player = videojs('red5pro-video');
player.src({
src: "http://54.255.142.187:5080/live/kris.m3u8",
type: "application/x-mpegURL",
useCueTags: true
});
window.onOrientation(player, 'red5pro-video');
player.play();
})();
</script>
HTML5 Video tag fallback is not working for me. Embed tag without Video tag works fine.
Below code doesn't work.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>Video Demo</title>
</head>
<body>
<video width="549" height="309" controls autoplay>
<source src="small.3gp" type="video/3gpp">
<div>
No Movie
<embed width="549" height="309" autoplay="true" type="video/quicktime" src="small.3gp">
</div>
</video>
</body>
</html>
Below code works.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>Video Demo</title>
</head>
<body>
<embed width="549" height="309" autoplay="true" type="video/quicktime" src="small.3gp">
</body>
</html>
I need to create a video player which can run any kind of video file and fallback to quick time if its not supported by native. Mp4 format works fine as its supported in native browser (Chrome , IE and FF also as decoder is already there).
I am testing fallback for other than Mp4. like 3gp in this case.
I have seen code examples of Video for everybody, videojs, diveintohtml5/video, but not able to execute the the above code.
Any help would be appreciated.
My home page does not have any videos, but other pages have video. What do you think of this code.
<script>
var ie=false;
<!--[if ie]>ie=true</p>-->
</script>
<body>
<script>
if (ie){
document.write("<a href='My Flash Page'>IE7,8,9 not IE10<a>")
} else {
document.write("<a href='My HTML5 Page'>all browsers + IE10, but not IE7,8,9<a>")
}
</script>
</body>
My home page does not have video, but the link will serve my other page in HTML5 or flash.
If broswer is IE7,8,9 then link goes to a web page with a flash player.(IE10 ignores code).
All other browers to include IE10 go to a web page with raw HTML5 video (full screen support)
I think it is a better way to have the script inside of the conditional IE comment than having the condition inside of the script.
<script type="text/javascript">
var ie=false;
</script>
<!--[IF IE]>
<script type="text/javascript">
ie=true;
</script>
<![endif]-->
Here is some code from the view:
<div class="flowplayer">
<video>
<source type="video/mp4" src="~/Content/Videos/HowItWorksRegistration1.mp4">
</video>
</div>
I get the error: "html5: Video file not found"
But if I link to a web url for a random .mp4 video, it works. Also, earlier in the view, I have images with the same relative path and that works. I've double checked the path and even tried to put the video in the same directory (with updated path), and that did not work.
Any help appreciated.
The first thing to check is can you browse to the video url and play it in the browser.
If you get a 404 it's because the path is wrong.
If it does not play it is because the browser does not support that video.
HTML5 wiki shows what video formats what browsers support.
Some Chrome versions have issues with playing MP4 content. Workaround: List a WEBM before the MP4 source and/or set preload="none" as video tag attribute.
you should add :
<link href="~/Scripts/Video2/flowplayer-5.4.6/skin/minimalist.css" rel="stylesheet" />
<link href="~/Scripts/Video2/x/demo.css" rel="stylesheet" />
<link href="~/Scripts/Video2/x/pygments.css" rel="stylesheet" />
<link href="~/Scripts/Video2/x/playlist.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.7.1.js"></script>
<script src="~/Scripts/Video/jquery.min.js"></script>
<script src="~/Scripts/Video2/flowplayer-5.4.6/flowplayer.min.js"></script>
Then you should use this :
<div class="flowplayer" style="width: 450px; height: 260px" data-ratio="0.416" data-swf="//releases.flowplayer.org/5.4.6/flowplayer.swf">
<video style="width: 450px; height: 260px" src="~/Content/Videos/HowItWorksRegistration1.mp4"></video>
</div>
We are having trouble firing events on Android 2.x devices. From our testing, Android 4.x and iOS 5/6 work correctly. But on Android 2.x devices, we are sometimes getting the "end" event and sometimes we are getting the "start" event.
It says it has cross browser compatibility but anyone run into these issues?
Here are the relevant parts of the code
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://vjs.zencdn.net/c/video-js.css">
<script src="http://vjs.zencdn.net/c/video.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
</head>
<body>
<div id="videoplayer" style="margin:0 auto; text-align:center;">
<video id="video" class="video-js vjs-default-skin" controls autoplay preload="auto" width="300" height="300">
</video>
</div>
</body>
</html>
<script>
$(document).ready(function() {
_V_("video").ready(function() {
var thePlayer = this;
var startVideo = function() {
// do stuff
};
var endVideo = function() {
// do stuff
};
thePlayer.addEvent("play", startVideo);
thePlayer.addEvent("ended", endVideo);
});
});
</script>
I figured out the problem. I was able to reproduce it on a Android 2.2 and 2.3 emulator. No events were firing on video playback because there was an error loading the video.
Issues (For Android 2.x devices):
Playing a link from an HTTPS url was no working. The link we were using was an Amazon Cloudwatch URL which linked to an Amazon S3 bucket. When I changed the url to an HTTP vs HTTPS URL it worked.
I had to remove the autoplay attribute on the video element. Not sure why, but the video player in Android 2.x didn't like this.
Once I made these 2 fixes I was able to stream video on Android 2.x devices (as well as Android 4.x, iPhone and iPod)