vlc mp4 stream to html5 player - html

I would like to stream my desktop to some other devices like ps3, tablet or smartTV.
The simplest solution for this I thought was vlc streaming to a html5 page stored on a local server. I start vlc in my commandline with the following transcode settings:
:sout=#transcode{vcodec=h264,vb=100,scale=0,acodec=mpga,ab=96,channels=2,samplerate=44100}:standard{access=http,mux=ts{use-key-frames},dst=:8080}
The html code:
<video width="704" height="396" controls="controls" loop="loop" autoplay="autoplay">
<source src="http://####:8080/" type="video/mp4" />
Your browser does not support the video tag.
</video>
I can watch the stream into vlc on a different machine. According to this post:
Streaming mp4 with vlc to html browser
mux=mp4 won't create a working stream. Also reported in the vlc manual. Unless I am mistaken they define ts as the right mux for h264.
So where is the clue?

You can't use mp4 mux format to pack h264 encoded video. You must use asf or ts mux. Ts and asf not working with html5 video player. Use vlc plugin to play video or change video codec to other such theora...

Related

HTML video tag read MOV file as an audio file in Google Chrome

Here is a MOV video file URL which was copied from my iPhone 8.
https://www.yangfamily.tw/attachments/IMG_3049.MOV
Then I tried to play this video on Chrome, the html code like below:
<video width="320" height="240" controls>
<source src="https://www.yangfamily.tw/attachments/IMG_3049.MOV">
Your browser does not support the video tag.
</video>
Ok, it was loaded successfully.
But no frame showed, only the controls displayed.
And then I right clicked the controls, the menu showed that it is an AUDIO file, not a video file.
It's indeed a video file, and I can play this video file and show the frames successfully on any other player.
Why this MOV video file was read as an audio file in Google Chrome? (Chrome Version: 90.0.4430.93 64-bits)
Any idea?
This video is encoded as h.265 HEVC.
ffprobe is a free open source tool (online version: https://ffprobe.a.video/probe?url=https%3A%2F%2Fwww.yangfamily.tw%2Fattachments%2FIMG_3049.MOV)
when I look at the codec:
codec_long_name : H.265 / HEVC (High Efficiency Video Coding)
h265 is only supported in Safari. its a patent/royalty thing. You should re-encode the video as h264 - and serve that version (99.9% browser support).
Chrome CAN play the audio track:
codec_long_name : AAC (Advanced Audio Coding)
so thats why you get audio only in Chrome.
In your <source> tag, you need to add type='video/mp4'
Like this:
<source src="https://www.yangfamily.tw/attachments/IMG_3049.MOV" type='video/mp4'>

How to stream rtmp in angular 6 or in HTML 5

I have integrated rtmp with node server now i need to show rtmp stream in my angular 6 app as live video. Any suggestion for me?
I have tried vidojs and other player but that did not worked for me.
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<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" />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
https://www.npmjs.com/package/ngx-webcam
The one component gives you full control and lets you take snapshots via actions and event bindings
Stream needs to be delivered in format that can be played on HTML5 (HLS, MPEG DASH, WebRTC).
If stream is H264+AAC can be delivered using Wowza SE as HLS to Safari, DASH to Chrome/Firefox (adaptive playback is required depending on browser)
You can try this technology in this demo that should play HLS in Safari and DASH in Chrome:
https://videonow.live/channel/videonowlive/
If using different codecs or want to publish as WebRTC, transcoding will also be required.
For further research, deploy this free open source WP plugin for running these capabilities on your own setup:
https://wordpress.org/plugins/videowhisper-live-streaming-integration/
Web browsers do not support rtmp without flash. You must convert to a format it does support like DASH, and use a player like video.js

Can you embed VLC on a website so that people who doesn't have VLC installed can view it?

I am trying to make a video streaming site and I want to use VLC to play my video. However, I want other people who doesn't have VLC to be able to view my videos through a VLC plugin. Is it possible? I want to use VLC because it can play anything.
The viewer has to have VLC and the Browser Plugin Installed on there pc, depending on the file format of the video you could use the HTML5 Video tag.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
Update your browser.
</video>
This will only work if the viewer has a html5 ready browser meaning old versions of IE wont be able to see the video but the code will tell them that they have to update there browser
You might want to checkout the current beta of http://www.projekktor.com - it's a generic HTML 5 player, which uses whatever backend is available on the user's PC. Since recently, it also supports VLC: https://twitter.com/projekktor/status/354187957571297281

HTML5 Multi-platform player with one Wowza stream

GOAL
FLV Video files being served by Wowza Media Server to be played on all devices, platform/browser independent. I'm currently working with a player loaded with AJAX which uses VideoJS.
WHERE IM WORKING
http://activemd.net/html5/
THE CODE
It seems like you have to provide 3 different types of videos for HTML5, so my approach is trying to have Wowza transcode them to the 3 types.
<video id="example_video_1" class="video-js vjs-default-skin" controls="" preload="none" width="432" height="300" poster="amd-poster.jpg" autoplay="" data-setup="{}">
<source src="http://74.208.104.107:1935/riverview/mp4:ri_martino.flv" type="video/mp4">
<source src="http://74.208.104.107:1935/riverview/webm:ri_martino.flv" type="video/webm">
<source src="http://74.208.104.107:1935/riverview/ogg:ri_martino.flv" type="video/ogg">
</video>
PROBLEM
My videos won't play, anywhere. When I use http versions of the videos, my player plays them without a problem.
WHAT I HAVE TRIED
An example from the StackOverflow post at: Wowza, iOS and HTML5 video tag
An example from the Wowza post at: http://www.wowza.com/forums/content.php?35-How-to-set-up-video-on-demand-streaming
QUESTION
How can I get my FLV videos to be streamed to all devices, regardless of platform or browser?
Am I going about the whole transcoding approach incorrectly?
Thanks.
Rick
WebM & Ogg are not supported for Video On Demand (VOD) application. You must convert the file to MP4.
You can also use JW Player which is a Wowza supported player.

playing mp4 files in html5

I am trying to play a mp4 file from my server on google chrome. but nothing hapens when press play, it lights up for a split second (which shows the does exist) but then fails to stream. If I enable divx webplayer extension on chrome it plays it through divx player, however I need it to be possible to play it without that extention. here is the code I am using:
<video width="560" height="340" controls>
<source src="hood.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2" '>
</video>
Semi-answer: try and use JWPlayer it plays pretty much anything and it automatically downgrades if needed. (Using HTML5 or Flash)