#PC、手机web页面直播hls视频

概述

一转眼就到了11月，很多工作中遇到的坑都在一一解决，仔细想了想值得分享的应该是web页面直播hls格式的视频了，当时我们的项目是需要在手机嵌入的页面来播放摄像头的视频，视频格式是hls直播流，HTML5的video标签并不能直接播放hls直播流，需要借助插件来实现。
关于插件的话网上也搜了一大堆用来测试，发现免费还好用的应该算是video.js了，video.js也是专门针对hls直播流做了一个依赖video.js的插件videojs-contrib-hls.js。前端页面同时引入这两个js插件就可以播放hls直播流。

注意

当然播放也是有需要注意的地方：

  • 后端传过来的播放文件地址是以 *.m3u8为后缀，关于hls转换m3u8这里就不介绍了，因为我只是做前端的，对这个不了解
  • 前端进行hls直播需要启动server才可以，不然直接播放会报错，我用的是eclipse
  • hls直播有延迟，我们的是大约15秒，然后每次地址可以播放30s，我就用定时器调用接口来实现不间断直播

代码块

好了，废话不多说，直接上例子，例子也是video.js官网的：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.bootcss.com/video.js/6.3.3/video-js.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/video.js/6.3.3/video.min.js"></script>
    <script src="https://cdn.bootcss.com/videojs-contrib-hls/5.11.0/videojs-contrib-hls.js"></script>

</head>
<body>
<video id="example-video" width=960 height=540 class="video-js vjs-default-skin" controls poster="http://i.onionstatic.com/onionstudios/3819/16x9/800.jpg">
    <!--<source src="http://7xjr0i.com2.z0.glb.qiniucdn.com/test-vedio-hls.m3u8" type="application/x-mpegURL">-->
    <!--<source src="API/hls_test/hls_test/output.m3u8" type="application/x-mpegURL">-->
    <source src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" type="application/x-mpegURL">
</video>

<script type="text/javascript">
    var player = videojs('example-video');
    //player.play();
</script>
</body>
</html>

链接

gitgub地址：
video-hls

也有在线测试的地址：
https://jsbin.com/meqeqipaye/1/edit?html,output

video.js里有很多格式的视频播放解决方案，需要的可以看一下：
https://github.com/videojs

翻博客看到boonya写的一个视频直播项目流程比较详细，推荐下（2017-11-22更新）：
http://blog.csdn.net/boonya/article/details/52210576

Logo
即构开发者社区

致力于链接即构和开发者，提供实时互动和元宇宙领域的前沿洞察、技术分享和丰富的开发者活动，共建实时互动世界。

更多推荐

flutter+dart聊天室|flutter仿微信界面聊天App实例

基于Flutter+Dart+photo_view+image_picker+video_player等技术开发跨平台实战仿微信聊天应用。实现消息发送/表情gif、图片预览、红包/视频号/朋友圈等功能。运用技术技术框架：Flutter 1.12.13/Dart 2.7.0视频组件：chewie: ^0.9.7图片/拍照：image_picker: ^0.6.6+1图片预览组件：photo_view

avatar 即构开发者社区

WebRTC语音对讲无声音

最近在搞Webrtc对讲的降噪和回音消除，找了代码然后改了非常多。。。。发现一个很无语的Bug：进入程序进行语音对讲，有偶发扬声器无法播放声音，但如果首先进行视频通话，再语音，刚正常。刚开始怀疑是代码改了哪里改错了，查了很多资料，Webrtc输出的每行日志都排查了，还是不行，后来直接通过查看喇叭设置，发现那个setSpeakerphoneOn已被关闭了，真是Orz.....然后直接在启动程...

avatar 即构开发者社区

用Flutter构建一个 视频通话联系人管理应用

用Flutter构建一个 视频 / 通话 / 联系人管理 应用这是编程务实的第三个实验， 要完成一个简单的拨号器。在此需求基础上，我使用Flutter添加了一些全新的功能，包括视频通话，观众视角通话，联系人管理等功能。 尽我最大所能…美化（救命 ，UI真的尽力了, logo也是白嫖的）下面是一个简易的Demo展示:项目目录：$ lsandroidbuildioslibmyflutter.imlpu

avatar 即构开发者社区