HTML5基于flash实现播放RTMP协议视频，具体代码如下所示：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | <title>Video.js 7</title> body{background-color: #191919} .m{ width: 640px; height: 264px; margin-left: auto; margin-right: auto; margin-top: 100px; } <div class="m"> <video id="rtmpVideo" class="video-js vjs-default-skin vjs-big-play-centered vjs-fluid" controls="" preload="auto" width="640" height="264" data-setup="{ "html5" : { "nativeTextTracks" : false } }" data-origwidth="640" data-origheight="264" style="width: 1264px; height: 521.4px;"></video> //设置中文 videojs.addLanguage('zh-CN', { "Play": "播放", "Pause": "暂停", "Current Time": "当前时间", "Duration": "时长", "Remaining Time": "剩余时间", "Stream Type": "媒体流类型", "LIVE": "直播", "Loaded": "加载完毕", "Progress": "进度", "Fullscreen": "全屏", "Non-Fullscreen": "退出全屏", "Mute": "静音", "Unmute": "取消静音", "Playback Rate": "播放速度", "Subtitles": "字幕", "subtitles off": "关闭字幕", "Captions": "内嵌字幕", "captions off": "关闭内嵌字幕", "Chapters": "节目段落", "Close Modal Dialog": "关闭弹窗", "Descriptions": "描述", "descriptions off": "关闭描述", "Audio Track": "音轨", "You aborted the media playback": "视频播放被终止", "A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。", "The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。", "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。", "No compatible source was found for this media.": "无法找到此视频兼容的源。", "The media is encrypted and we do not have the keys to decrypt it.": "视频已加密，无法解密。", "Play Video": "播放视频", "Close": "关闭", "Modal Window": "弹窗", "This is a modal window": "这是一个弹窗", "This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按键或启用关闭按钮来关闭此弹窗。", ", opens captions settings dialog": ", 开启标题设置弹窗", ", opens subtitles settings dialog": ", 开启字幕设置弹窗", ", opens descriptions settings dialog": ", 开启描述设置弹窗", ", selected": ", 选择", "captions settings": "字幕设定", "Audio Player": "音频播放器", "Video Player": "视频播放器", "Replay": "重播", "Progress Bar": "进度小节", "Volume Level": "音量", "subtitles settings": "字幕设定", "descriptions settings": "描述设定", "Text": "文字", "White": "白", "Black": "黑", "Red": "红", "Green": "绿", "Blue": "蓝", "Yellow": "黄", "Magenta": "紫红", "Cyan": "青", "Background": "背景", "Window": "视窗", "Transparent": "透明", "Semi-Transparent": "半透明", "Opaque": "不透明", "Font Size": "字体尺寸", "Text Edge Style": "字体边缘样式", "None": "无", "Raised": "浮雕", "Depressed": "压低", "Uniform": "均匀", "Dropshadow": "下阴影", "Font Family": "字体库", "Proportional Sans-Serif": "比例无细体", "Monospace Sans-Serif": "单间隔无细体", "Proportional Serif": "比例细体", "Monospace Serif": "单间隔细体", "Casual": "舒适", "Script": "手写体", "Small Caps": "小型大写字体", "Reset": "重启", "restore all settings to the default values": "恢复全部设定至预设值", "Done": "完成", "Caption Settings Dialog": "字幕设定视窗", "Beginning of dialog window. Escape will cancel and close the window.": "开始对话视窗。离开会取消及关闭视窗", "End of dialog window.": "结束对话视窗" }); videojs.options.flash.swf = 'js/video-js.swf'; // 初始化视频，设为全局变量var myPlayer = 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); });}); </div> |
另外，可能需要更新flash,更新完重启电脑，然后点击允许flash就可以了
!!!看到评论里有人说不执行，我特地把网盘资源下载下来又看看了，没问题的，视频没反应的，可能是因为你用的文件协议打开html的，要用http格式打开啊，自己搞的apache吧
demo网盘下载链接：
链接: https://pan.baidu.com/s/1i7ATxe78jDaLnZM4YRb3tA 提取码: uqsa
2020年8月28：补充 video class 上加上vjs-fluid 可以实现resize效果，demo上估计没有吧
到此这篇关于HTML5基于flash实现播放RTMP协议视频的示例代码的文章就介绍到这了,更多相关html5播放RTMP协议视频内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章，希望大家以后多多支持IT俱乐部！
