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
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'm using an html audio control in a webpage to play an mp4 file.
<audio controls>
<source src="example.m4a" type="audio/mp4">
</audio>
The tag displays a visual control specific to the platform.
How can I use the tag so that it displays a clickable icon of my choice instead of the default visual control?
Maybe like this :
let a=0;document.getElementsByTagName("i")[0].addEventListener("click",function(){
if(a==0){
document.getElementsByTagName("audio")[0].play();a++;document.querySelector("i").style.opacity="1";
}else{
document.querySelector("audio").pause();a--;document.querySelector("i").style.opacity=".5";
}
});
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div>
<h1 style="display:inline;color:grey;font-family:sans-serif;font-weight:normal;">Prison Walls</h1>
<span><i class="fa fa-volume-up fa-2x" style="color:grey;opacity:.5"></i></span>
</div>
<audio hidden>
<source src="https://files.freemusicarchive.org/storage-freemusicarchive-org/music/ccCommunity/Julie_Maxwells_Piano_Music/Classic_Piano_Collection_from_the_Princess_of_Mars/Julie_Maxwells_Piano_Music_-_21_-_Prison_Walls.mp3" type="audio/mp3">
</audio>
</body>
I used javascript addEventListener with traitement. So that, you can play or pause the audio. Also you can found the volume up icon you are looking for on https://fontawesome.com/icons/volume-up?style=solid.
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>
Video sphere does not work. It's showing white screen. Video does not play.
<!DOCTYPE html>
<html>
<head>
<title>Hello, WebVR! - A-Frame</title>
<meta name="description" content="Hello, WebVR! - A-Frame">
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<video id="video" src="https://cdn.glitch.com/eb8b5b90-b564-46cc-a9bd-abd27ce76783%2Fvideo.mp4?1524149938496" autoplay="true"
loop="true" crossorigin="anonymous" playsinline webkit-playsinline></video>
</a-assets>
<a-videosphere id="video-screen" src="#video"></a-videosphere>
</a-scene>
</body>
</html>
It showing this error: Error: WebGL warning: drawArrays: Active texture 0 for target 0x0de1 is 'incomplete', and will be rendered as RGBA(0,0,0,1), as per the GLES 2.0.24 $3.8.2: The dimensions of level_base are not all positive.
There was a bug in aframe v0.8.0: https://github.com/aframevr/aframe/issues/3444
The fix was done in v0.8.2: https://github.com/aframevr/aframe/commit/5ead860379ebe61d2ef1f2acbe2eed5537ccc682
So if you change your script src to "https://aframe.io/releases/0.8.2/aframe.min.js", it shall work.
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.