欢迎来到GM源码之家!会员签到可免费领金币,开通会员下载免金币(本站金币1:10)
广告位出租
广告位招租
HTML5基于flash实现播放RTMP协议视频的示例代码
时间:2020-12-06 来源:脚本之家 作者:努力的阿花 浏览: 次  推荐  打印

这篇文章主要介绍了HTML5基于flash实现播放RTMP协议视频的示例代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下


HTML5基于flash实现播放RTMP协议视频,具体代码如下所示:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Video.js 7</title>
<link href="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>
<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 } }'>
  </video>
<script src="js/video.min.js"></script>
<script src="js/videojs-flash.min.js"></script>
  <script type="text/javascript">
   //设置中文
  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);
    });
});
</script>
</div>
</body>
</html>

另外,可能需要更新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协议视频的示例代码的文章就介绍到这了


(责任编辑:GM源码之家)

转载请注明来源:https://www.gmyuanma.com/jsjc/4566.html

会员头像
说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!

郑重声明:
本站所有内容均由互联网收集整理、网友上传,并且以计算机技术研究交流为目的,仅供大家参考、学习,不存在任何商业目的与商业用途。 若您需要商业运营或用于其他商业活动,请您购买正版授权并合法使用。
我们不承担任何技术及版权问题,且不对任何资源负法律责任。
如无法下载,联系站长索要。
如有侵犯您的版权,请及时【联系我们】我们尽快处理。