The following is a summary of my own solutions to playing HLS protocol video in PC browsers.

background

The project requires PC browsers to play live HLS videos and not use Flash plugin players.

The solution

videojs

  • function

    • Supports PC to play m3U8 video format

  • Pay attention to the point

    • Cross-domain problems may occur, requiring the cooperation of the server to allow cross-domain videos

  • The code shown
// Import file <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"</script> // HTML section <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" 
  data-setup='{}'>
    <source src="http://www.tony.com/hls/test.m3u8" type="application/x-mpegURL"< span style = "box-sizing: border-box! Important; word-wrap: break-word! Important;"'#my_video_1'); //player.play(); Var myPlayer = videojs('my_video_1<%=i%>',{
    bigPlayButton : true,
    textTrackDisplay : true,
    posterImage: true,
    errorDisplay : true,
    controlBar : true
},function(){//ready load // console.log(this) var _that = this; this.on('loadedmetadata'.function(){
    })
    this.on('ended'.function(){
    })
    this.on('firstplay'.function(){
    })
    this.on('loadstart'.function(){// start loading}) this.on()'loadeddata'.function(){
    })
    this.on('seeking'.function(){// on the way to get the video stream}) this.on()'seeked'.function}) this.on(){// Get the video stream, can play})'waiting'.function(){
    })
    this.on('pause'.function(){
    })
    this.on('play'.function() {})}); myPlayer.play(); // Video playbackCopy the code

hlsJs

  • The code shown
// The file introduces <scripttype="text/javascript" src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script> // HTML section <div class="video" id="HLSPlayer"> // var video = document.getelementbyId ('video');
var hls = new Hls();
var hlsUrl = 'http:// domain name/HLS / 123. M3u8';
hls.loadSource(hlsUrl);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function(){
    video.play();
});

Copy the code

TcPlayer Tencent Player

  • knowledge

    • On-demand: The video source is a file on a server with a progress bar

    Live broadcast: Live broadcast in real time without progress bar

  • The code shown
// Import file <script SRC ="/ / imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.2.0.js" charset="utf-8"></script> // HTML section <div id="id_test_video" style="width:400px; height:300px;"Var player = new TcPlayer();'id_test_video', {
   "m3u8": "http://2157.liveplay.myqcloud.com/2157_358535a.m3u8", / /"flv": "http://2157.liveplay.myqcloud.com/live/2157_358535a.flv"// Add a FLV playback address, please replace it with the actual available playback address for PC platform"autoplay" : true// Safari on iOS and most mobile browsers do not enable auto-play"coverpic" : "Http://img4.imgtn.bdimg.com/it/u=4038339613, & FM = 200 & 2609508265 gp = 0. JPG"."width" :  '480'// The display width of the video, please try to use the video resolution width"height" : '320'// Video display height, please try to use video resolution height});Copy the code

Note: there are cross-domain problems and cannot be tested locally, please see the TcPlayer Tencent player link below for details

knowledge

  • 1.

    •     
    PCThe end needs to be decoded by other means (videojs-contrib-hls)
    .m3u8Format the video before it can pass
    videoThe label or
    FlashTo play

  • 2.

    •     
    Live streaming embraces H5 without Flash[Can read this article, learn more harm]

  • 3.

    •     
    RTMP: This parameter is available only in the browser
    FlashImplement player, cannot support mobile end
    WEBplay

  • 4.

    • other
    PCBrowser playback technology: 

1, sewise-player [Flash and HTML5 player]Flash play m3U8 files 2, MediaElement [Flash and Sliverlight player] 3, Jwplayer [Flash and HTML5 player] web media playerCopy the code

Problems encountered

  • Cross-domain problem

    • Solution: Server added support for cross-domain requests

Refer to the link

videojs

videojs
PC
HLS

  • VideoJS usage examples

  • PC browser plays m3U8 –videoJs

  • Front-end Video TAB Plays m3U8 videos

  • How does the front-end play video in M3U8 format

  • PC browser plays M3U8

  • HLS stream cannot play on web side solution (video.js)

TcPlayer Tencent Player

  • Web player TcPlayer — Tencent Live SDK Web player

hlsjs

  • hlsJs

  • Pure HLS (M3U8) cross-platform HTML5 video player plug-in

  • Html5 <video> Parse m3U8 to play video

The source code

The demo address