I want to run the RTSP live video stream on my web page.The following code works good with the rtsp//url as shown in the code but when I replace that URL with my cam IP ,its not working.The cam IP link is playing in VLC player but not in my HTML PAGE.
How can I display an RTSP video stream in a web page?
is some what related to what i'm trying to ask but it doen't help me to find solution.
Is there any solution for this.
Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Streamedian player example</title>
<style>
#test_video {
width: 720px;
}
</style>
</head>
<body>
<video id="test_video" controls autoplay>
<source src="rtsp://184.72.239.149/vod/mp4:BigBuckBunny_115k.mov"
type="application/x-rtsp">
<!-- <source src="rtsp://admin:abc#myIPAddress/"
type="application/x-rtsp">-->
</video>
<script src="https://cdn.bootcss.com/babel-polyfill/7.0.0-beta.2/polyfill.min.js"></script>
<script src="streamedian.min.js"></script>
<script>
var p = Streamedian.player('test_video', {socket: "wss://specforge.com/ws/"})
</script>
</body>
</html>
Related
Hi I have tried to use the control attribute in 3 different IDE but it is not working in any of them. I am attaching a file showing my code. Please tell me my mistake.
<DOCTYPE! html>
<html>
<head>
<title> Started Again </title>
</head>
<body>
<h1>
This is again I started learning website so that I can benefit others through my knowledge!
</h1>
<video width = "700" height = "500" controls>
<source src = "F:\Steve Jobs Commencement.mp4" type = "video/mp4">
</video>
</body>
</html>
Your Code Is Fine Just You Need To Add Correct Path I Have Verified You Code By Applying Vedio Link Which Says That Code Is Fine
<DOCTYPE! html>
<html>
<head>
<title> Started Again </title>
</head>
<body>
<video width="700" height="500" controls>
<source src="https://media.istockphoto.com/videos/bluish-mb-concept-with-digital-code-video-id1219346556" type="video/mp4">
</video>
</body>
</html>
I have started creating a website using HTML, however I want a video to play when I open the page and I have embedded the video as shown:
<!DOCTYPE HTML>
<!-- GADGET SWAG WEBSITE -->
<html>
<head>
<h1> Video HERE </h1>
<!-- Material Design -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
<video width="1920" height="1080" autoplay>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
This is an example video, however, it doesn't work on a local PC. I use Notepad++ to code in, but it doesn't seem to work?
Please help
thanks
yg.swagness
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
This code is the issue- it changes the way your page works and the video doesn't autoplay
I tried it, and it worked try using a different editor I just used this basic one https://htmledit.squarefree.com
I have only very recently got into coding. In fact, yesterday. Right now I am trying to code a web app that, when pressed, displays a few buttons that when clicked play songs. However when I try to click on the buttons, it just does nothing. I believe it has something to do with chrome not allowing in-line java script, but I'm not 100% sure.
Here is my code
HTML:
<!DOCTYPE html>
<html>
<head>
<script>
var song = new Audio();
song.src = "SoundsOfSilence.mp3";
var song2 = new Audio();
song2.src = "ChildrenPlaying.mp3";
</script>
</head>
<body>
<nav>
Sounds Of Silence
Children Playing
</nav>
</body>
</html>
try using the audio attribute tags.
Such as:
<audio controls autoplay>
<source src="SoundofSilence.ogg" type="audio/mpeg">
<source src="ChildrenPlaying.mp3" type="audio/mpeg">
</audio>
I want to add video which is of format (mp4) to my page using flash player (not html5). I have tried this using Flowplayer but I am not able to do this:
<html>
<head></head>
<body>
<div class="flowplayer is-splash"
data-engine="flash"
data-swf="../dist/flowplayer.swf">
<video src="http://d32wqyuo10o653.cloudfront.net/Extremists.m4v" preload="none"></video>
</div>
</body>
</html>
Can someone please explain this? I searched a lot experimented a lot but didn't get results.
Try this it's working from me!
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="http://d32wqyuo10o653.cloudfront.net/Extremists.m4v" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
</body>
</html>
If you want only use the flowplayer flash version, you can do something like this :
<html>
<head>
<script src="http://releases.flowplayer.org/js/flowplayer-3.2.13.min.js"></script>
</head>
<body>
<script>
flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf");
</script>
</body>
</html>
You can see this code working on codebeautify.org here.
Hope that can help.
I have been trying using media player in web page to stream RTMP videos. I have using following code
<embed allowfullscreen="true" src="http://www.focusonthefamily.com/family/JWPlayer/mediaplayer.swf" flashvars="allowfullscreen=true&allowscriptaccess=always&autostart=false&shownavigation=true&enablejs=true&volume=50&file=Test.mp4&streamer=rtmp://192.168.0.102/vod/&image=vid/100_2255.JPG" />
Now it showing simple classic jwPlayer. How can i apply styles to it using css or skin
Skins included in the Pro/Premium/Ads editions can be configured by simply inserting the skin name. Here's an example, loading the bekle skin:
jwplayer("myElement").setup({
file: "/upload/myVideo.mp4",
skin: "bekle"
});
You're using JW Player 5, which is obsolete. Get JW Player 6. I've found that it's always safest to wrap the player in an outer <div>, and apply all styling to that outer <div>. So, your setup would look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>JW Player</title>
<script src='jwplayer.js'></script>
</head>
<body>
<p>Streaming Video</p>
<div id='player'><div id='myElement'>Loading the player...</div></div>
<script>
jwplayer("myElement").setup({
file: "rtmp://example.com/application/mp4:myVideo.mp4",
image: "/assets/myVideo.jpg",
height: 360,
width: 640
});
</script>
</body>
</html>
Then apply your CSS to the "player" ID.
Are you sure you want to use RTMP? Is this a "live" video feed? If you're just providing MP4's, there's no need to use streaming. RTMP is Flash, which won't work on any mobile, whereas simply providing MP4's will work everywhere.