时间：2023-04-18 18:10:02 | 来源：网站运营
时间：2023-04-18 18:10:02 来源：网站运营
三种视频流浏览器播放解决方案：
在线咨询
<html lang="en"> <head> <meta charset=utf-8/> </head> <body> <div id='player'> <video width="640" height="320" controls> <source src="http://10.10.5.119/live/livestream.m3u8" type="application/x-mpegURL"> </video> </div> </body></html>缺点：import React, { PureComponent } from 'react';import Reflv from 'reflv';export class HttpFlv extends PureComponent { render() { return ( <Reflv url={`http://localhost:7001/live/test.flv`} type="flv" isLive cors /> ) }}缺点：class VideoPlayer extend Component { constructor(props) { super(props); this.VideoOptions = { autoplay: true, controls: false, sources: [{ src: url, type: "application/x-mpegURL" }], fluid: 'true', playbackRates: [0.75, 1, 1.5, 2] } } componentDidMount() { this.player = videojs(this.videoNode, this.VideoOptions, function onPlayerReady() { }) } componentWillUnmount() { if (this.player) { this.player.dispose() } } render(){ return ( <video ref={node => this.videoNode = node} className='video-js vjs-16-9' /> ) }}缺点：<object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc' events='false' width="720" height="410"> <param name='mrl' value='rtsp://admin:12345@192.168.10.235:554/h264/ch1/main/av_stream' /> <param name='volume' value='50' /> <param name='autoplay' value='true' /> <param name='loop' value='false' /> <param name='fullscreen' value='false' /> <param name='controls' value='false' /></object>优缺点<video id="test_video" controls autoplay></video><script src="free.player.1.8.4.js"></script><script> if (window.Streamedian) { var errHandler = function(err){ console.log('err', err.message); }; var infHandler = function(inf) { console.log('info', inf) }; var playerOptions = { socket: "ws://localhost:8088/ws/", redirectNativeMediaErrors : true, bufferDuration: 30, errorHandler: errHandler, infoHandler: infHandler }; var html5Player = document.getElementById("test_video"); html5Player.src = "rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov"; var player = Streamedian.player('test_video', playerOptions); window.onbeforeunload = function(){ player && player.destroy(); player = null; Request = null; } }</script>注意：测试时先从官网申请license key，否则socket 只能识别localhost和127.0.0.1rtmp{ server{ listen 1935; application live{ live on; record off; } application hls{ live on; hls on; hls_path nginx-rtmp-module/hls; hls_cleanup off; } }}4.ffmpeg转码ffmpeg -i "rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov" -f flv -r 25 -s 1080*720 -an "rtmp://127.0.0.1:1935/hls/mystream"5.video 播放<html><head><title>video</title><!-- 引入css --><link rel="stylesheet" type="text/css" href="./videojs/video-js.min.css" /></head><body><video id="test_video" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay> <source src='rtmp://127.0.0.1:1935/hls/mystream' type='rtmp/flv'/></video></body></html><!-- 引入js --><script type="text/javascript" src="./videojs/video.min.js"></script><script type="text/javascript" src="./videojs/videojs-flash.js"></script><script>videojs.options.flash.swf = "./videojs/video-js.swf" var player = videojs('test_video', {"autoplay":true}); player.play();</script>注意：使用谷歌浏览器播放时，需要开启flash允许ffmpeg -i "rtsp://184.72.239.149/vod/mp4://BigBuckBunny_175k.mov" -c copy -f hls -hls_time 2.0 -hls_list_size 0 -hls_wrap 15 "D:/Program Files/html/hls/test.m3u8"ffmpeg 关于hls方面的指令说明<html><head><title>video</title><!-- 引入css --><link rel="stylesheet" type="text/css" href="./videojs/video-js.min.css" /></head><body><div class="videoBox"> <video id="my_video_1" class="video-js vjs-default-skin" controls> <source src="http://localhost:8088/hls/test.m3u8" type="application/x-mpegURL"> </video></div></body></html><script type="text/javascript" src="./videojs/video.min.js"></script><script type="text/javascript" src="./videojs/videojs-contrib-hls.min.js"></script><script>videojs.options.flash.swf = "./videojs/video-js.swf" var player = videojs('my_video_1', {"autoplay":true}); player.play();</script>五、jsmpeg + ffmpeg<script src="jsmpeg.min.js"></script><div class="jsmpeg" data-url="video.ts"></div>关键词：解决,方案,浏览,视频
