最新公告
  • 欢迎您光临凯崖之家,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 这篇文章主要介绍了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就可以了

    凯崖之家KAIYAZJ.COM一个优质的模板开发平台
    凯崖之家 » HTML5基于flash实现播放RTMP协议视频的示例代码

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    凯崖之家
    一个高级程序员模板开发平台

    发表评论

    发表评论

    • 243会员总数(位)
    • 1051资源总数(个)
    • 107本周发布(个)
    • 10 今日发布(个)
    • 296稳定运行(天)

    凯崖之家KAIYAZJ.COM一个优质的模板开发平台

    立即查看 立即注册
    升级SVIP尊享更多特权立即升级