Браузер ПК для воспроизведения видео по протоколу HLS

внешний интерфейс браузер Тенсент прямая трансляция

Следующее мое собственноеPCБраузерная играHLSКраткое изложение решений протокола видео.

задний план

Требования к проектуPCвоспроизведение в терминальном браузереHLSживое видео и не может использоватьFlashподключаемый плеер[PS: я слышал, что он используется государственными служащими, браузеры не могут загружать плагины].

Решение

videojs

  • Функция

    • служба поддержкиPCбоковое воспроизведениеm3u8формат видео

  • будь осторожен

    • может появитьсяперекрестный доменПроблема требует сотрудничества сервера, чтобы разрешить междоменное видео.

  • Отображение кода
//引入的文件
<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部分
<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">
 </video>

//js部分 --这部分别忽略了[我自己没写，调的快崩溃]
//var player=videojs('#my_video_1');
//player.play();

//视频播放
var myPlayer = videojs('my_video_1<%=i%>',{
    bigPlayButton : true,
    textTrackDisplay : true,
    posterImage: true,
    errorDisplay : true,
    controlBar : true
},function(){
    //ready 加载
//                        console.log(this)
	var _that = this;
    this.on('loadedmetadata',function(){
    })
    this.on('ended',function(){
    })
    this.on('firstplay',function(){
    })
    this.on('loadstart',function(){
        //开始加载
    })
    this.on('loadeddata',function(){
    })
    this.on('seeking',function(){
        //正在去拿视频流的路上
    })
    this.on('seeked',function(){
        //已经拿到视频流,可以播放
    })
    this.on('waiting',function(){
    })
    this.on('pause',function(){
    })
    this.on('play',function(){
    })
});
myPlayer.play(); //视频播放

hlsJs

  • Отображение кода
//文件引入
<script type="text/javascript" src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>

//html部分
<div class="video" id="HLSPlayer" >

//js部分
var video = document.getElementById('video');
var hls = new Hls();
var hlsUrl = 'http://域名/hls/123.m3u8';
hls.loadSource(hlsUrl);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function(){
    video.play();
});

TcPlayer Игрок Tencent

  • Точка знаний

    • По требованию: источник видео — это файл на сервере с индикатором выполнения.

    Прямая трансляция: Прямая трансляция, без индикатора выполнения

  • Отображение кода
//引入文件
<script src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.2.0.js" charset="utf-8"></script>

// html部分
<div id="id_test_video" style="width:400px; height:300px;"></div>

//js部分
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", //增加了一个flv的播放地址，用于PC平台的播放 请替换成实际可用的播放地址
    "autoplay" : true,      //iOS下safari浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
    "coverpic" : "http://img4.imgtn.bdimg.com/it/u=4038339613,2609508265&fm=200&gp=0.jpg",
    "width" :  '480',//视频的显示宽度，请尽量使用视频分辨率宽度
    "height" : '320'//视频的显示高度，请尽量使用视频分辨率高度
});

Уведомление:Возникла междоменная проблема, и ее нельзя протестировать локально. Подробности см. в следующем разделе.TcPlayer 腾讯播放器ссылка на

Точка знаний

  • Пункт знаний 1:
    •     PCТерминалу нужно декодировать другими средствами (videojs-contrib-hls).m3u8формат видео, может пройтиvideoэтикетка илиFlashиграть
  • Пункт знаний 2:
    •     В эпоху отсутствия Flash пусть прямые трансляции охватят H5 (полная статья)[Вы можете ознакомиться с этой статьей, подробнее узнать не вредно]
  • Пункт знаний 3:
    •     RTMP: можно использовать только в браузереFlashРеализовать плеер, не может поддерживать мобильный терминалWEBиграть
  • Пункт знаний 4:
    • разноеPCТехнология воспроизведения через браузер:
1、sewise-player    [Flash和HTML5播放器]Flash播放m3u8文件
2、mediaelement    [Flash和Sliverlight播放器] 
3、Jwplayer [Flash和HTML5播放器]  网页媒体播放器

возникшие проблемы

  • междоменная проблема

    • Решение: сервер добавляет поддержку междоменных запросов.

Ссылка на ссылку

videojs

> используется в проектеvideojsвыполнитьPCвоспроизведение в терминальном браузереHLSвидео

TcPlayer Игрок Tencent

hlsjs

исходный код

демонстрационный адрес

Категории