I have setup a page with a videojs html5 player that automatically starts to play a remote RTMP live stream. It works.
When I start the stream the video appears as a tiny box in the top left of the player. The player is 1280x720 and the video is streaming from a computer or android phone at any resolution, but it also starts in the top left corner.
I haven't measured the resolution of the video in the corner but I'd guess it's about 40x40. When I select the fullscreen option the video stretches to full screen. When I shut off fullscreen the video correctly fills in the player.
I would expect the video to start and fill the player right away without having to fullscreen/restore it. Any advice or direction would be greatly appreciated it.
This is what I'm working with
<html>
<head>
<title> Stream Player </title>
<link href="video-js.css" rel="stylesheet" type="text/css">
<script src="video.js"></script>
<script>
videojs.options.flash.swf = "video-js.swf";
</script>
</head>
<body bgcolor=000000>
<center>
<font face="verdana" color=993333><h1>Test</h1></font>
<video id="livestream" class="video-js vjs-default-skin vjs-big-play-centered"
controls autoplay preload="auto" width="1280" height="720"
data-setup='{"example_option":true}'>
<source src="rtmp://webserver.example:1935/live/streamname" type="rtmp/mp4">
</video>
</center>
</body>
</html>
Related
I'm hosting on wix and want to embed a simple audio player to play a livestream. I have tested the code in w3schools and the audio plays. However, when viewing the wix site with the same code embedded, the player loads with a runtime of 0:00 and won't play, even when clicked.
I can only assume there is a conflict with the iframe wix runs the code in.
The live page is at https://www.joetimothycoleman.com/bewilderments-22
Any solutions welcome!
<html>
<Head>
</head>
<body>
<audio controls autoplay>
<source src="http://locus.creacast.com:9001/slawica_puszcza_zielonka.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</body>
</html>
I have read similar questions as this, but not with a solution to my problem. For example this one does not have a solution and this one I am already doing it. So
I have a simple html page and a video, in the same folder and the code is
<!DOCTYPE html>
<html>
<head>
<title>HTML Video embed</title>
</head>
<body>
<p>Learn Eclipse</p>
<br />
<iframe width="560" height="315" src="./pelicula.mp4" frameborder-"0" allowfullscreen></iframe>
<video controls muted > <source src="./pelicula.mp4" type="video/mp4"></video>
<video controls> <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4" type="video/mp4"></video>
</body>
</html>
As a result I have (this screen is in Windows 10)
As you can see, the video is not shown.
Btw, in windows when I double click the video I can watch it.
In linux this video has problems to play and I see an error message but in windows I see no error message, only the screen above
How can this be solved?
The problem was solved by processing the video
ffmpeg -i pelicula.mp4 -vcodec h264 pelicula_264.mp4
I am building a simple page consisting of a table containing links to videos. The action I'm trying to duplicate is essentially how the menu system works on a DVD. I want to be able to launch a video, and when the video finishes, I want the menu (our original launching page) to be displayed again without having to hit the browser's "back" button.
The code below demonstrates how each video is launched. Using this code, when a video finishes playing, we are left at the blank screen where the video ends.
<td align="center"><strong><span style="font-family: Arial; font-size:24px;">
Yakima Video</span></strong></td>
</tr>
So, here I am again. I have now tried to set up a forwarding myself. I believe here is a way for you to advance your project. Greetings to your grandson.
This is the code i used:
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<video id="video1" controls="controls">
<source src="sample.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<script>
video = document.getElementById('video1');
video.addEventListener('ended',function() {
window.location.href = 'https://www.youtube.com/';})
</script>
</body>
The example below plays almost instantly if I click on play as soon as possible when page is loaded, in Firefox. But in Chrome the playback will take about 4 seconds before playing sound. Why is it so and what can I do to speed this up in Chrome?
The audio source is an mp3 stream streaming from an Icecast server.
<html>
<head>
</head>
<body>
<audio id="audio" crossOrigin="anonymous" src="http://..." controls />
</body>
</html>
I have created application in android phonegap.I want to play video using html5 video player.
My code is:
<!DOCTYPE html>
<html>
<head>
<title>Video.js | HTML5 Video Player</title>
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet" type="text/css">
<script src="http://vjs.zencdn.net/c/video.js"></script>
</head>
<body>
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{}">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
</video>
</body>
</html>
This code show the videoplayer .but video is not playing while clicking play button.what's wrong?
please guide me.
thanks in advance.
Android has issues with playing video and can often only be triggered via JavaScript by adding a click event handler to the video element and playing the video once that is activated.
For example:
function play() {
var video = document.getElementById('video');
video.addEventListener('click',function(){
video.play();
},false);
}
You will probably need to adapt this code to work with yours though.
Everything immediately worked for me. I'm using an iOS emulator.
Make sure you set the permission to go to that URL.
Cordova.plist --> externalhosts
You can use a wildcard to cover several URL's into one.
Try to add this:
data-setup='{"controls":true}'
Add the following to your main Activity
#Override
public void init() {
super.init();
this.appView.getSettings().setPluginsEnabled(true);
}
We cant play video using in android. it works fine in iphone though. try using plugin for the purpose.
check this out
VideoPlayer Plugin