当前位置: 首页 > news >正文

可以做推广的网站南京百度seo排名优化

可以做推广的网站,南京百度seo排名优化,网站建设 天津,校园微网站建设方案ppt模板起因: 由于需要在一个项目内接入多种常用的视频流,所以接触到video.js,这里就做个记录。 框架: vue2 video.js videojs-contrib-hls videojs-flvjs-es6 videojs-flash video-js.swf vue安装就不讲了,直接从项目…

起因: 由于需要在一个项目内接入多种常用的视频流,所以接触到video.js,这里就做个记录。

框架: vue2 + video.js + videojs-contrib-hls + videojs-flvjs-es6 + videojs-flash + video-js.swf

vue安装就不讲了,直接从项目开始了。

第一步:安装依赖

// video.js
npm install video.js
// 安装hls,用于播放 HLS
npm install  videojs-contrib-hls
// 安装flv,用于播放 FLV
npm install videojs-flvjs-es6
npm install flv.js
// 安装flash 用于播放 RTMP
npm install videojs-flash
npm install videojs-swf

依赖版本:

"flv.js": "^1.6.2",
"video.js": "^7.21.5",
"videojs-contrib-hls": "^5.15.0",
"videojs-flash": "^2.2.1",
"videojs-flvjs-es6": "^1.0.1",
"videojs-swf": "^5.4.2",

说明:比较重要,有很多坑

  1. 安装 videojs-swf 是因为 RTMP 必须用 flash 播放( RTMP 是由 Adobe 公司基于 Flash Player 播放器对应的音视频 FLV 封装格式提出的一种,基于TCP 的数据传输协议),video.js 里面使用 flash 是需要引入 swf 文件路径的,所以这里需要安装一下,方便引用,当然也可以自己下载后放在资源目录里面引用。
  2. 安装以上依赖的时候要注意,要用 npm 安装,在查资料的时候,发现有些文章说用 cnpm 安装会出现一些问题,不过我没遇到,不过为了避免还是慎重吧(毕竟像我这种学艺不精的,有些问题解决起来挺玄学的)。
  3. 针对 RTMP 的说明,截止目前(2023.08.30)Chrome浏览器(114版本)和 Microsoft Edge(116版本) 已经不支持 flash 了,反正我找了半天没找到设置的地方,最终还是在360浏览器上才勉强测试了 RTMP 的播放。
  4. 对于 videojs-flash 这个插件需要 video.js 版本的配合,如果版本不对,就会一直报错(The "flash" tech is undefined. Skipped browser support check for that tech.),解决方案是找到 videojs-flash 里面匹配的版本,然后更换 video.js 版本,就可以解决了,具体的方法,文章后面会详细介绍的。

第二步:引入依赖

import videojs from 'video.js'
import 'video.js/dist/video-js.min.css'
import 'videojs-contrib-hls'
import 'videojs-flvjs-es6'
import 'videojs-flash'
import SWF_URL from 'videojs-swf/dist/video-js.swf'

第三步:创建播放器(播放视频流)

html 部分

<template><div ref="videoPlayerBox" class="component"><video class="videoPlayer video-js"></video></div>
</template>

JS 部分

<template><div ref="videoPlayerBox" class="component"><video class="videoPlayer video-js"></video></div>
</template>
<script>
import { VueExtend } from 'vdrag-lib'
import videojs from 'video.js'
import 'video.js/dist/video-js.min.css'
import 'videojs-contrib-hls'
import 'videojs-flvjs-es6'
import 'videojs-flash'
import SWF_URL from 'videojs-swf/dist/video-js.swf'export default {data () {return {player: null,streamType: 'RTMP',streamURL: 'rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp'}},watch: {streamType: function () {console.log('change streamType')this.$nextTick(() => {this.loadPlayer()})},streamURL: function () {console.log('change streamURL')this.$nextTick(() => {this.loadPlayer()})},},mounted () {this.initPlayer()},beforeDestroy () {this.disposePlayer()},methods: {// 初始化播放器initPlayer () {this.$nextTick(() => {let playerOption = {preload: 'auto', // 预加载autoplay: true, // 自动播放controls: true,techOrder: ['html5', 'flvjs', 'flash'], // 这里的顺序一定要 'flvjs' 在 'flash' 前面,要不然 flv 格式的就无法播放了// 如果报 app.js:242798 Uncaught TypeError: this.el_.vjs_getProperty is not a function 错误,只保留 'flash' 就不报错了// 报错 The "flash" tech is undefined. Skipped browser support check for that tech. 可以查看 videojs-flash 里面 node_modules 查看需要的 video.js 的版本,然后修改video.js的版本就可以了flash: {hls: { withCredentials: false },swf: SWF_URL // 引入静态文件swf},flvjs: {mediaDataSource: {cors: true,withCredentials: false,},},sources: [{src: this.streamURL,type: this.getType(this.streamType)}],}this.player = videojs(this.$el.querySelector('.videoPlayer'), playerOption, function onPlayerReady () {console.log('onPlayerReady', this)})})},// 重新加载播放器loadPlayer () {this.$refs.videoPlayerBox.innerHTML = `<video class="videoPlayer video-js"></video>`this.$nextTick(() => {this.initPlayer()})},// 销毁播放器disposePlayer () {if (this.player) {this.player.dispose()}},getType (type) {let playerType = ''switch (type) {case 'FLV':playerType = 'video/x-flv'breakcase 'HLS':playerType = 'application/x-mpegURL'breakcase 'RTMP':playerType = 'rtmp/flv'breakcase 'RTSP':playerType = 'video/mp4'break}return playerType}}
}
</script>
http://www.ds6.com.cn/news/16937.html

相关文章:

  • 兰溪自适应网站建设特点云南新闻最新消息今天
  • 网站备案怎么备案sem是指什么
  • 网站后台账户密码成都网站建设方案托管
  • 牛什么的网站建设营销工具
  • 网站建设项目详情app代理推广合作50元
  • b2c电子商务网站分类企业网站制作方案
  • 一键建网站网络推广用什么软件好
  • php网站开发第三章优化建议
  • 网站域名跳转怎么做百度云资源搜索引擎
  • 关于行业网站建设意见seo入门
  • 网站怎么做电脑系统下载东莞寮步最新通知
  • 网站建设的设计总结滕州今日头条新闻
  • 做网站需要哪些知识百度云搜索引擎入口
  • 荆州网站设计个人博客网页设计
  • 长沙网站seo优化排名阿里云域名注册官网
  • 网站建设中扒站为什么是违法的网站外链有多重要
  • 游戏推广合作seo咨询岳阳
  • wordpress p=seo教程seo优化
  • 企业客户管理系统seo百度快照优化公司
  • 缪斯设计杭州seo优化
  • 东莞制作企业网站百度的网站
  • 用老域名做网站还是新域名优化大师是什么意思
  • 如何看一个网站的好坏北京seo关键词排名优化
  • 丹东网站网站建设海南网站建设
  • wordpress 个人电脑百度seo关键词外包
  • 曾舜晞网站是哪个公司做的电商如何从零做起
  • 做证明图片的网站百度指数电脑端查询
  • 免费php网站模板下载怎么提高百度关键词排名
  • 济南做网站比较好的免费软文推广平台
  • 网站建设费用 百度文库seo优化快排