I want to add a live stream to my site. Is it possible?
The source: https://istanbuluseyret.ibb.gov.tr/bagdat-caddesi/
<video id="videojs620230c0a8c70_html5_api" class="vjs-tech" preload="auto" autoplay="" loop="" muted="" poster="https://services.ibb.gov.tr/cam_out/wp-content/uploads/sites/4/2021/07/bagdat_caddesi1_05.jpg" data-setup="{"fluid":true,"plugins":{"airplayButton":{}}}" playsinline="" src="blob:https://istanbuluseyret.ibb.gov.tr/539fef53-2de7-4324-bc51-e493701508e6">
<source src="https://livestream.ibb.gov.tr/cam_turistik/cam_trsk_bagdat_cad_1.stream/playlist.m3u8" type="application/x-mpegURL">
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
You cannot use M3U8 files in a <video> tag.
To play the video you must read the M3U8 (text) file and pass the inside links to the <video> tag using a buffer, so this means using MediaSource Extensions (MSE) method. There are tutorials online on how to prepare your video data for MSE
Alternatively just use a ready-to-use video player that understands M3U8 playlists.
One example player is videoJS.
(test your .m3u8 file here: https://videojs.github.io/videojs-contrib-hls/)
Related
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
I am working on a script called HOME (view it here)
Now i'm creating a video player and used html5 for it but it wont load the video. Its just black. Here is my code.
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264">
<source src="/uploads/videos/1.mp4" type='video/mp4' />
</video>
Im using google chrome.
After doing some research it seems that google chrome and firefox doesnt support mp4 videos but support other formats. So i will have to change the script to upload and maybe convert the video to other formats. Source
I'm creating a webpage that is using HTML5 for videos. I tried one video, and it loaded and played successfully. But then, the other video does not even load. How can I fix this? The code is the same for the working video and the not working video
<video src="SnakeVids/sukyandaru.mp4" width="350" height="300" controls="controls" type="video/mp4"></video>
Btw, the difference is that the first video is a .mp4, and the other one I converted from .flv to .mp4.
After reading the comments, it looks like your video was converted into a format that is not compatible with Google Chrome. MP4 supports some codecs but only a small subset is widely supported, and Chrome supports these video formats for the <video> tag.
You should encode your video using a supported codec.
Additionally, you might want to provide different sources for compatibility with other browsers and platforms.ogg is a safe choice. A simplified example extracted from w3schools:
<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.
</video>
You can also use third-party libraries, like videoJS, that will help you with video formats support. Some of them even have a flash fallback.
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.
I'm using video.js to embed videos with HTML5 and the video simply plays too fast. I press the play button and I can tell it's at least 1.5x the proper speed.
Any ideas?
EDIT: Sorry! No code. Here you go. By the way, it's copied from videojs.com itself.
<video class="video-js vjs-default-skin" controls
preload="auto" data-setup="{}">
<source src="http://foo.bar/wp-content/uploads/date/video.mp4" type='video/mp4'>
</video>
No webm video for now, I'll work on converting the mp4 to that later.
Also, I'm using this in WP; the admin posts videos that we uploads. No video width, height, poster, or id defined.
Most likely your video is not properly encoded to be compatible with web browsers.
How did you get the video file in the first place
Where does it work
How did you preprocess it for web