Плеер m3u для html

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

HTML5 Video player for Icecast Playlst

opi/m3uStreamPlayer

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

HTML5 Player from m3u playlist

Use playlist from Icecast server with audio/video HTML5 element.

Use case: Icecast setup with several relays servers; If currently used server failed, the next one is automatically used.
For setting up Icecast Relay, see http://www.icecast.org/docs/icecast-2.1.0/icecast2_relay.html

Use a tag and set playlist url with data-playlist attribute. Ex:

video id pl-s">video" controls loop autoplay width pl-s">640" data-playlist pl-s">http://live.cloudfrancois.fr/playlist/faimaison"> video> 

Load m3uStreamPlayer.js file after your tag

script src pl-s">m3uStreamPlayer.js">script>

m3uStreamPlayer.init(selector: '#video', debug: false>);

• selector : (string) Use querySelectorAll syntax
• debug : (bool) Printed in console

NB : You can simply pass a selector string like m3uStreamPlayer.init(‘#video’);

Working example with FAImaison.net streaming playlist in faimaison.html file, and on faimaison.net

About

HTML5 Video player for Icecast Playlst

Источник

How to play HLS stream in HTML5 player Video.JS?

In this tutorial, we’re going to learn how to play HLS stream in HTML5 video player using video.js.

HTTP Live Streaming, also known as HLS Stream, is a HTTP-based communication protocol which used dynamic or adaptive bit rate for streaming videos. This protocol was developed and published by Apple Inc. in the year 2009 and a wide variety of media player, web browsers, mobile devices and streaming media players support this protocol.

HLS has the benefit of being compatible with all Internet-connected devices, making it easier to adopt than streaming protocols that need the usage of specialist servers. Another advantage is that an HLS stream may adjust video quality based on network constraints without interfering with playing. While a result, video quality may improve or deteriorate in the midst of a video as the consumer watches it.

So, we’ll try to use an HLS stream is our video player in the web browser using video.js in the next section of the video.

How to play HLS stream in HTML5 player Video.JS?

To play an HLS Stream in our video player using video.js, we need to first import the required package, which is ‘videojs-contrib-hls’. Video-js contrib hls is already implemented in the latest versions of video.js and we just need to include it inside our code by linking it in the tag.

Example

Consider the code below to add «‘videojs-contrib-hls» in our local project −

 src="https://unpkg.com/videojs-contrib-hls/dist/videojscontrib-hls.js">

Once we’ve included the package required for playing HLS video, let’s add our HLS source in the source tag with its mime type. The HLS stream files usually have .m3u8 extension at the end of the file. And the video mime type for the steams is «application/x-mpegURL».

Consider the code below to add an HLS Stream source in our video element −

 src="https://www.tutorialspoint.com/videos/stream.m3u8" type="application/x-mpegURL" >

Example 1

So, the complete example of an HLS Stream video player is going to look like this −

html> head> link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> /head> body> video id="my-video" class="video-js vjs-big-play-centered vjs-theme-sea" controls preload="auto" fluid="true" poster="https://www.tutorialspoint.com/videos/sample.png" data-setup='<>' > source src="https://www.tutorialspoint.com/videos/sample720.m3u8" type="application/x-mpegURL"> /video> script src="https://vjs.zencdn.net/7.17.0/video.min.js">/script> script src="https://unpkg.com/videojs-contribhls/dist/videojs-contrib-hls.js">/script> script> var player = videojs('my-video'); /script> /body> /html> 
 

In the above example, you can notice that we’ve add our HLS stream in the source tag inside the video element. And in the tag, we’ve also included the package ‘videojs-contrib-hls’, which is responsible for playing our HLS video stream in the web browser.

When you execute the above code, you’ll see that a video player is created which plays the HLS stream video file and has a custom theme applied. We’ve also used some standard HTML5 and some video.js specific video options like controls, preload and fluid.

Note − Please make sure to add the correct path of your HLS steam in the source tag.

Now that we’ve understood how to make a basic HLS stream video player using video.js let’s see how we can make this programmatically instead of adding a source tag.

Creating an HLS Video Player using Video.js Programmatically

In this section of the tutorial, we’re going to again create a video player to play HLS Steram but this time, we’re going to use video-js functions for the same.

First, we’ll create a video.js player reference and will map it to a video element with the id as ‘my-video’. Then we’ll add the «src» to the created player with the link of HLS stream and its type.

Use the following code to create a player and add HLS Video stream source −

 var player = videojs('my-video'); player.src( src: 'path/to/my/stream.m3u8', type: 'application/x-mpegURL' >); 

In the above code snippet, we’ve create a video player reference using video-js function to the video element with . And then we’ve added «src» attribute to the player use the «player.src» method. We’ve passed the source path to our HLS Stream file with extension m3u8 and then we’ve set the type of the files as ‘application/x-mpegURL’.

Example 2

The complete working example of create an HLS Video player inside the using video.js will be as follows −

html> head> link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> /head> body> video id="my-video" class="video-js vjs-big-play-centered vjs-theme-sea" controls preload="auto" fluid="true" poster="https://www.tutorialspoint.com/videos/sample.png" data-setup='<>' > /video> script src="https://vjs.zencdn.net/7.17.0/video.min.js"> /script> script src="https://unpkg.com/videojs-contribhls/dist/videojs-contrib-hls.js">/script> script> var player = videojs('my-video'); player.src( src: 'https://www.tutorialspoint.com/videos/sample720.m3u8', type: 'application/x-mpegURL' >); /script> /body> /html> 
 

On executing the above example, we’ll see a video player in our browser which will be playing our HLS Video Stream.

Note − Don’t forget to update the source path of the HLS stream.

Conclusion

In this tutorial, we understood how to play an HLS Video stream in HTM5 video player using video.js. We also saw various methods of creating an HLS Stream Video player with the help of examples.

Источник

Eyevinn HTML Player

Eyevinn HTML Player is a simplistic video player for playback of ABR streams. It is free-to-use and currently supports the ABR streaming formats Apple HLS, MPEG-DASH and Microsoft Smooth Streaming.

Demo implementation available here

The player is built on Hls.js, Shaka Player and DashJs

Getting Started

The player is available both from CDN as well as from NPM for building into your JavaScript application.

CDN

To be able to quickly add Eyevinn HTML Player to your project we are hosting the player and delivered through our CDN. Want to use a package manager and host the player on your site head over to the download section.

JS

Place the following near the end of your pages right before the closing tag.

CSS

Copy-paste the stylesheet into your to load the CSS for the player.

Template

The snippet below shows an example on how to implement the player:

    rel="stylesheet" href="https://player.eyevinn.technology/v0.4.2/build/eyevinn-html-player.css">    id="player-wrapper">

    id="player-wrapper">