在app和h5页面中播放视频监控

本文章向大家介绍app和h5播放实时视频监控。

我是把我们公司的小程序做成app但是在播放视频监控这一块出现了问题，app和h5页面不支持live-player（小程序原生标签）后台报错组件注册失败，原因是该标签不支持app。所以只能换一个方向解决问题，经过我一早上百度下午3点多还没有写出来，网上好多东西乱七八糟说什么的都有，于是乎我综合了一下他们的观点实现了我的实时视频播放....不说了快下班了...上代码。

格式要求

video 支持：App平台，支持本地视频(mp4/flv)、网络视频地址（mp4/flv/m3u8）及流媒体（rtmp/hls/rtsp）。

live-player 支持：app不支持百度小程序支持 m3u8 格式；微信小程序支持 flv, rtmp 格式。

注意：使用live-player 组件需注意：如果发布到小程序，需要先通过各家小程序的审核。指定类目的小程序才能使用（微信小程序类目、百度小程序类目），审核通过后在各家小程序管理后台自助开通该组件权限。

正式上代码

此处需要引入flv.js

<template><div class="box"><!-- #ifdef H5 || APP-PLUS--><view id="myPlayer" class="video" /><videostyle="width:100%;height:100%"class="video"v-if="videourl":src="videourl":autoplay="true":controls="false":show-fullscreen-btn="false":show-play-btn="false":show-center-play-btn="false"></video><!-- #endif --></div>
</template><script>
import flvjs from "../../js/flv.js";
export default {data() {return {videourl: "",};},onLoad(e) {this.videourl = e.videourl + "?authedkey=" + e.authedkey;uni.setNavigationBarTitle({title: e.title,});// #ifdef H5 || APP-PLUSthis.$nextTick(() => {this.getLivePlayer();});//#endif},methods: {///H5 初始化播放器getLivePlayer() {var player = document.createElement("video");player.style = "width: 100%";document.getElementById("myPlayer").appendChild(player);if (flvjs.isSupported()) {this.flvPlayer = flvjs.createPlayer({type: "flv",isLive: false, //<====直播的话，加个这个url: this.videourl, //<==自行修改});this.flvPlayer.attachMediaElement(player);this.flvPlayer.load(); //加载player.play();// this.flv_start();}},statechange(e) {console.log("live-player code:", e.detail.code);},error(e) {console.error("live-player error:", e.detail.errMsg);},},
};
</script><style lang="scss" scoped>
.box {position: fixed;width: 100%;height: 100%;
}
</style>

在app和h5页面中播放视频监控相关推荐

H5页面中的视频轮播（类似于banner轮播图效果）
先说下我的需求,如下图: 手机模型中间部分是视频播放,当一条视频播放完毕后,整屏会自动上滑切换到下一个视频. 详细效果展示请在PC端点击:http://www.17jianyue.cn/ 查看提起轮 ...
应用之星教你如何在H5页面中加入视频？
众所周知,H5页面在朋友圈非常火爆,那么如何让你的H5页面更吸引人关注,那就要多花点小心思了,比如在H5页面加入视频,让H5页面更生动更活力,本文聚焦于基于微信传播的H5页面的视觉设计,教大家如何通过 ...
ckplayer支持html5播放吗,移动端（H5）环境中播放视频需要了解的内容-ckplayer使用方法...
移动端(H5)环境中播放视频需要了解的内容虽然HTML5(下面简称:H5)的技术已整体趋于成熟,但在视频播放方面,如果跟pc端的flashplayer对比的话,功能就显的非常简单了.如果你决定要让你 ...
H5 -- 微信h5页面中下载第三方app的方法
需求:在微信h5页面中下载第三方app -- 安卓, 直接下载apk文件包:iphone,跳转AppStore 分析:微信不支持,在微信中屏蔽了apk文件的下载以及AppStore的跳转(且除非和TX ...
html调用rpst 源码_在web页面中播放rtsp直播数据流方法
WEB播放RTSP直播数据流方法附录一些RTSP测试地址: 1.rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov 一段动画片 2.rtsp: ...
app 嵌套h5页面问题
1.app与h5页面方法监听与参数传递 2.Android webview 如何打开本地存储,提供给JS调用 html5 的lwindow.localStorage功能,还有其他的权限 3.Andro ...
RecyclerView中播放视频
在很多播放视频的APP中都有在列表中播放视频的效果,当点击播放的时候,在列表中播放,当视频列表滑动出屏幕的时候,就在屏幕的右下角播放.大致效果如下图: 主要思路在和RecyclerView的同级布局 ...
h5页面怎么处理文件流_一种H5页面效果生成视频文件的方法及系统与流程
本发明涉及计算机技术领域,尤其涉及一种H5页面效果生成视频文件的方法及系统. 背景技术: 现有的视频合成方法均是将视频需要合成的各个元素拆分出来,针对每个元素进行合成视频,复杂度高,一旦需要添加新的动 ...
Swift5+WkWebView实现APP嵌套H5页面
Swift5+WkWebView实现APP嵌套H5页面前言一.Swift5和JS交互 1.类型一:有返回值 2.类型二:无返回值 3.app回调js方法二.Swift5修改JS的window.a ...

在app和h5页面中播放视频监控

本文章向大家介绍app和h5播放实时视频监控。

在app和h5页面中播放视频监控相关推荐

最新文章

热门文章