这篇文章主要介绍了HTML5基于flash如何实现播放RTMP协议视频,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

具体代码如下所示:

<!doctypehtml><html><head><metacharset="utf-8"><title>Video.js7</title><linkhref="css/video-js.min.css"rel="stylesheet"><style>body{background-color:#191919}.m{width:640px;height:264px;margin-left:auto;margin-right:auto;margin-top:100px;}</style></head><body><divclass="m"><videoid="rtmpVideo"class="video-jsvjs-default-skinvjs-big-play-centeredvjs-fluid"controlspreload="auto"width="640"height="264"data-setup='{"html5":{"nativeTextTracks":false}}'></video><scriptsrc="js/video.min.js"></script><scriptsrc="js/videojs-flash.min.js"></script><scripttype="text/javascript">//设置中文videojs.addLanguage('zh-CN',{"Play":"播放","Pause":"暂停","CurrentTime":"当前时间","Duration":"时长","RemainingTime":"剩余时间","StreamType":"媒体流类型","LIVE":"直播","Loaded":"加载完毕","Progress":"进度","Fullscreen":"全屏","Non-Fullscreen":"退出全屏","Mute":"静音","Unmute":"取消静音","PlaybackRate":"播放速度","Subtitles":"字幕","subtitlesoff":"关闭字幕","Captions":"内嵌字幕","captionsoff":"关闭内嵌字幕","Chapters":"节目段落","CloseModalDialog":"关闭弹窗","Descriptions":"描述","descriptionsoff":"关闭描述","AudioTrack":"音轨","Youabortedthemediaplayback":"视频播放被终止","Anetworkerrorcausedthemediadownloadtofailpart-way.":"网络错误导致视频下载中途失败。","Themediacouldnotbeloaded,eitherbecausetheserverornetworkfailedorbecausetheformatisnotsupported.":"视频因格式不支持或者服务器或网络的问题无法加载。","Themediaplaybackwasabortedduetoacorruptionproblemorbecausethemediausedfeaturesyourbrowserdidnotsupport.":"由于视频文件损坏或是该视频使用了你的浏览器不支持的功能,播放终止。","Nocompatiblesourcewasfoundforthismedia.":"无法找到此视频兼容的源。","Themediaisencryptedandwedonothavethekeystodecryptit.":"视频已加密,无法解密。","PlayVideo":"播放视频","Close":"关闭","ModalWindow":"弹窗","Thisisamodalwindow":"这是一个弹窗","ThismodalcanbeclosedbypressingtheEscapekeyoractivatingtheclosebutton.":"可以按ESC按键或启用关闭按钮来关闭此弹窗。",",openscaptionssettingsdialog":",开启标题设置弹窗",",openssubtitlessettingsdialog":",开启字幕设置弹窗",",opensdescriptionssettingsdialog":",开启描述设置弹窗",",selected":",选择","captionssettings":"字幕设定","AudioPlayer":"音频播放器","VideoPlayer":"视频播放器","Replay":"重播","ProgressBar":"进度小节","VolumeLevel":"音量","subtitlessettings":"字幕设定","descriptionssettings":"描述设定","Text":"文字","White":"白","Black":"黑","Red":"红","Green":"绿","Blue":"蓝","Yellow":"黄","Magenta":"紫红","Cyan":"青","Background":"背景","Window":"视窗","Transparent":"透明","Semi-Transparent":"半透明","Opaque":"不透明","FontSize":"字体尺寸","TextEdgeStyle":"字体边缘样式","None":"无","Raised":"浮雕","Depressed":"压低","Uniform":"均匀","Dropshadow":"下阴影","FontFamily":"字体库","ProportionalSans-Serif":"比例无细体","MonospaceSans-Serif":"单间隔无细体","ProportionalSerif":"比例细体","MonospaceSerif":"单间隔细体","Casual":"舒适","Script":"手写体","SmallCaps":"小型大写字体","Reset":"重启","restoreallsettingstothedefaultvalues":"恢复全部设定至预设值","Done":"完成","CaptionSettingsDialog":"字幕设定视窗","Beginningofdialogwindow.Escapewillcancelandclosethewindow.":"开始对话视窗。离开会取消及关闭视窗","Endofdialogwindow.":"结束对话视窗"});videojs.options.flash.swf='js/video-js.swf';//初始化视频,设为全局变量varmyPlayer=videojs('rtmpVideo',{autoplay:true,controls:true,//控制条muted:true,//静音preload:"auto",//预加载language:"zh-CN",//初始化语言playbackRates:[1,2,3,4,5,8,10,20],//播放速度'techOrder':['flash'],sources:[{/*rtmp://live.hkstv.hk.lxdns.com/live/hks*/src:'rtmp://www.uav-space.com/vod2/uspace3.mp4',//这里设置你的播放资源,type:'rtmp/flv'}]},function(){console.log("--------------成功初始化视频--------------");myPlayer.one("playing",function(){//监听播放console.log("开始播放");});myPlayer.one("error",function(error){//监听错误console.error("监听到异常,错误信息:%o",error);});});</script></div></body></html>

另外,可能需要更新flash,更新完重启电脑,然后点击允许flash就可以了

感谢你能够认真阅读完这篇文章,希望小编分享的“HTML5基于flash如何实现播放RTMP协议视频”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!