音视屏

video拉流播放rtmp格式

vue

npm i video.js@5.6.0

<template>
    <div><video id="player" class="video-js vjs-default-skin" data-setup="{}"></video>
    </div>
</template>

<script>
import videojs from 'video.js'
import 'video.js/dist/video-js.css'

export default {
  mounted () {
    this.videoPlayer = videojs('player', {
      preload: 'auto', // 预加载
      autoplay: true, // 自动播放
      flash: {
        swf: '//vjs.zencdn.net/swf/5.4.2/video-js.swf'
      },
      notSupportedMessage: '你的浏览器不支持Flash播放'
    })
    this.videoPlayer.src({
      type: 'rtmp/flv',
      src: 'rtmp://58.200.131.2:1935/livetv/dftv'// 'rtmp://192.168.253.210:1935/stream/test'
    })
  }
}
</script>

运行vue项目在搜狗火狐双核，显示浏览器不支持flash播放/flash版本太低，Flash Player官方下载中心-Flash中国官网下载flash ActiveX版，即可运行在搜狗和双核（edge不行）

测试rtmp地址是否可用：Download PotPlayer - free - latest version (softonic.com)

# 可用的m3u8地址
 http://219.151.31.38/liveplay-kk.rtxapp.com/live/program/live/hnwshd/4000000/mnf.m3u8
# rtmp
 rtmp://ns8.indexforce.com/home/mystream
# 公司的测试地址
 rtmp://59.110.231.93:1937/stream/15943639260

html

<!DOCTYPE html>
<html lang="zh">

<head>
  <title>Document</title>
  <link href="http://vjs.zencdn.net/5.19/video-js.min.css" rel="stylesheet">
  <script src="http://vjs.zencdn.net/5.19/video.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script>
</head>
<body>
<!-- 
poster="//vjs.zencdn.net/v/oceans.png" 视频未播放时展示的内容
     videojs.options.flash.swf 
 -->
 <video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" autoplay="autoplay"
 poster="//vjs.zencdn.net/v/oceans.png" width="500" height="400" data-setup='{}'>
<!--src: 规定媒体文件的 URL  type:规定媒体资源的类型-->
<source src='rtmp://ns8.indexforce.com/home/mystream' type='rtmp/flv'/>
</video>
</body>
<script type="text/javascript">
    // 设置flash路径,用于在videojs发现浏览器不支持HTML5播放器的时候自动唤起flash播放器
    videojs.options.flash.swf = 'https://cdn.bootcss.com/videojs-swf/5.4.1/video-js.swf';
    var player = videojs('my-player'); //my-player为页面video元素的id
    player.play(); //播放
    //    1. 播放   player.play()
    //    2. 停止   player.pause()
    //    3. 暂停   player.pause()
</script>

</html>

提示：html文件需要在服务器运行，不可以直接用网盘打开

html简单一点的写法

<!-- 
    下载源代码，js ， css , swf，注意源代码的版本必须是6.x.x版本以下的。
代码必须跑在服务上，不管是本地的服务还是最后部署到服务器上的，直接电脑磁盘打开的是不行的。
自动播放的需要满足不小于400 *300 , 或者把swf文件放到本地别跨域就行。
 -->
 <!DOCTYPE html>
<html lang="en">
<head>

    <title>Video.js | HTML5 Video Player 搜狗浏览器可打开</title>
    <link href="http://vjs.zencdn.net/5.20.1/video-js.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/5.20.1/ie8/videojs-ie8.min.js"></script>
    <script src="http://vjs.zencdn.net/5.20.1/video.js"></script>
</head>
<body>

  <video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="1280" height="720" poster="http://vjs.zencdn.net/v/oceans.png" data-setup="{}">
    <source src="rtmp://ns8.indexforce.com/home/mystream" type="rtmp/flv">
    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
  </video>
</body>

</html>

VM12179 video.min.js:18 VIDEOJS: ERROR: TypeError: this.el_.vjs_getProperty is not a function报错

原因：不推流了还在继续播放视频

解决办法：暂停。dispose（）如果继续播放，则这个节点已经没了，会报错

function destroyVideo(){
    if (myPlayer != null) {
        //暂停播放
        myPlayer.pause();
        //重置播放地址，切换地址之前使用可以有loading动画
        myPlayer.reset();

    }
}

posted @ 2022-09-21 17:45 我の前端日记阅读(76) 评论(0) 收藏举报

刷新页面返回顶部

音视屏

vue

html

公告