不用模板 网站,安国手机网站设计,做公司月刊网站,亚马逊品牌网站怎么做目前主流的几种直播协议
协议传输方式视频封装格式延时数据分段html播放httpflvhttpflv低连续可通过html5解封包播放(flv.js)rtmptcpflv tag低连续不支持dashhttpts文件高切片可通过html5解封包播放(hls.js)hls$1mp4 3gp webm高切片如果dash文件列表是mp4webm文件#xff0c;…目前主流的几种直播协议
协议传输方式视频封装格式延时数据分段html播放httpflvhttpflv低连续可通过html5解封包播放(flv.js)rtmptcpflv tag低连续不支持dashhttpts文件高切片可通过html5解封包播放(hls.js)hls$1mp4 3gp webm高切片如果dash文件列表是mp4webm文件可直接播放
RTMPReal Time Messaging Protocol基于TCP的由Adobe公司为Flash播放器和服务器之间音频、视频传输开发的开放协议。
HLSHTTP Live Streaming基于HTTP的是Apple公司开放的音视频传输协议。
HTTP FLV将RTMP封装在HTTP协议之上的可以更好的穿透防火墙等。 我们目前使用的rtmp流库使用video-js不过这里需要注意的一点是我们要使用x5版本的因为x6版本及以上不支持rtmp其实就是不支持flash了
所以这里也放上资源下载连接
video.js v5.18.4版 2017-3-24更新(支持ie8) video-js.swf
使用
html
div idcontentvideo idrtmpVideo classvideo-js vjs-default-skin vjs-big-play-centered width100% height100%!-- source放rtmp流地址 --source srcrtmp://168.0.0.157:1935/live/stream11 typertmp/flvp classvjs-no-js您的浏览器不支持HTML5请升级浏览器。/p/video
/div
123456789
js
//设置本地flash插件地址
videojs.options.flash.swf /js/video-js-5.8.2/video-js.swf;// 初始化视频设为全局变量
var myPlayer videojs(rtmpVideo, {autoplay: true,controls: true,//控制条poster: /images/camera/playStop.png,techOrder: [flash],//设置flash播放muted: true,// 静音preload: auto,// 预加载language: zh-CN,// 初始化语言playbackRates: [1, 2, 3, 4, 5, 8, 10, 20]// 播放速度
}, function () {console.log(--------------成功初始化视频--------------);myPlayer.one(playing, function () { // 监听播放console.log(开始播放);});myPlayer.one(error, function (error) { // 监听错误console.error(监听到异常错误信息%o,error);});
});实际效果
因为我在写这篇文章的时候后台断掉了调试没有继续推送所以没有画面
本地调试出现的问题
1、播放器在左上角并且提示无法加载插件
答下载新的flash插件因为我用的50版本都不提示我更新flash新的chrome版本会提示下载更新。
2、本地html页面打开播放不了
答需要本地服务器环境支持自己起一个本地服务器然后扔进去再打开。
