vue和小程序上实现HLS直播流视频_vue hls

vue中实现

引入下hls支持

npm install hls.js --save

在 引入video 页面引入

 import Hls from 'hls.js'

video 页面

<video id="myVideo" controls autoplay muted style="width:100%;height:300px;"></video>

methos 方法

//获取 video元素
var video = document.getElementById('myVideo')
video.src = result.src
video.setAttribute('playsinline', ''); // 添加playsinline属性
video.width = 640; // 适当设置宽度
video.height = 360; // 适当设置高度
video.play()

微信小程序中实现

wxml 中

<view>
  <video id="myVideo" wx:if="{{liveVideoUrl!=''}}" src="{{liveVideoUrl}}" controls is-live binderror="videoErrorCallback" show-center-play-btn='{{false}}' show-play-btn="{{true}}" show-center-play-btn="{{true}}" picture-in-picture-mode="{{['push', 'pop']}}" show-mute-btn autoplay muted="{{true}}" bindenterpictureinpicture='bindVideoEnterPictureInPicture' bindleavepictureinpicture='bindVideoLeavePictureInPicture' style="width: 100%;height: 300px;"></video>
  <image wx:else src="{{posterSrc}}" mode="aspectFill" style="width: 100%;height: 300px;"></image>
</view>
 
 
//这里主要是使用的 微信文档里的 video 插件,下面是文档地址
//https://developers.weixin.qq.com/miniprogram/dev/component/video.html

js 中，请求到视频 url，链接一般是 .m3u8结尾的数据，直接复制给liveVideoUrl。视频会自动播放