使用HTML5的VIDEO播放RTSP实时视频流源代码：

<!DOCTYPE html>

<html><head>

<meta http-equiv="content-type" content="text/html; charset=gbk">

  <title>Video Test 10: RTSP Streaming</title>

  <script>

    function rotateMe() {

      i = 0;

      int = setInterval(

        function () {

          video.style.WebkitTransform = 'rotate(' + (i++ %360) + 'deg)';

          video.style.MozTransform = 'rotate(' + (i++ %360) + 'deg)';

          video.style.OTransform = 'rotate(' + (i++ %360) + 'deg)';

        }, 50);

    }

    function resetRotation() {

      video.style.WebkitTransform = 'rotate(0)';

      video.style.MozTransform = 'rotate(0)';

      video.style.OTransform = 'rotate(0)';

    }

  </script>

</head>

<body>

  <div style="text-align: center;">

    <video style="transform: rotate(0deg);" id="v1" controls="controls" onmouseover="this.play()" height="240" width="320">

      <source src="rtsp://192.168.1.149:8554/">

      html5 video

    </video>

  </div>

  <script>

    var video = document.getElementsByTagName('video')[0];

  </script>

  <div style="text-align: center;">

    <button onclick="video.play()"> ▶ </button>

    <button onclick="video.pause()"> ◼ </button>

    <button onclick="video.volume += 0.25">Volume Up</button>

    <button onclick="video.volume -= 0.25">Volume Down</button>

    <button onclick="video.muted = true">Mute</button>

    <button onclick="video.muted = false">Unmute</button>

    <button onclick="rotateMe()"> Start Rotation</button>

    <button onclick="int=window.clearInterval(int);resetRotation()"> Stop Rotation</button>

  </div>

</body></html>

做人做事实事求是

以下是原贴引用

http://www.oneie.com/index.php/qyjs/video-tech/215-html5-rtsp

有HTML5外包需求的欢迎联系北京动点飞扬QQ：３７２９００２８８　

我们提供免费项目评估。

HTML5外包团队-技术分享【使用HTML5的VIDEO标记播放RTSP视频流】的更多相关文章

  1. HTML5外包团队——技术分享：HTML5判断设备在线离线及监听网络状态变化例子

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  2. Unity3D外包团队——技术分享U3D全景漫游（三）

    22.给每个物体都附上贴图,如果是纯色物体,也付给纯色贴图 23.打光后,选择要烘培的物体 设置输出路径 添加烘培输出的贴图类型 添加“LightingMap”类型 设置烘培贴图大小和目标贴图位置为“ ...

  3. U3D外包团队—技术分享 U3d中获得物体的size

    以size的x方向为例 1:gameObject.renderer.bounds.size.x;//这个值的结果真实反应出有MeshRenderer这个组件的模型的尺寸.不需要再乘以localScal ...

  4. H5外包团队 技术分享 基于H5+的项目分享

    项目截图:             有H5项目需求欢迎联系我们 我们提供免费的项目评估报价 QQ:372900288 WX:Liuxiang0884

  5. HTML5外包团队：HTML5 Canvas使用教程

    canvas 元素用于在网页上绘制图形. 什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canv ...

  6. HTML5外包团队 更新一下2019最新案例

    本项目控件均为动态加载,3D部分使用Unity3D,其它基于ReactJS,NodeJS,部分使用cocos2D,由于项目涉密,只能发部分截图,欢迎联系索取更多案例,企鹅号 372900288 祝大家 ...

  7. 承接Unity3D外包公司 — 技术分享

    Cardboard SDK for Unity的使用 上一篇文章作为系列的开篇,主要是讲了一些虚拟现实的技术和原理,本篇就会带领大家去看一看谷歌的Cardboard SDK for Unity,虽然目 ...

  8. 全景VR视频外包公司：长年承接VR全景视频外包（技术分享YouTube的360全景视频）

    虽然比预期来得晚了些,但YouTube终于支持360度全景视频了,这应该会吸引不少VR(虚拟现实)爱好者.今年1月,Google就表示这一功能将在“接下来”的几周出现.现在YouTube上已经有了一些 ...

  9. ios外包公司——技术分享：手机应用开发步骤

    1. 确定你的创意 您的创意是否有人做过,如果有类似的app,那就要多多考虑,争取超越并且有一些独特的优化设计在其中 2. 定位应用 通过苹果的人机界面指南(Human Interface Guide ...

随机推荐

  1. 八款你不得不知的开源前端JS框架

    angular.js Angular.JS是一个开源的JavaScript框架,最适于开发客户端的单页面应用.它实现了前端MVC架构,专注于扩展HTML功能,提供动态数据绑定(Data Binding ...

  2. wheel和staff分组

    1.只有属于wheel组的用户才可以用su登录为root 2. 具体设置步骤如下: 1)修改 /etc/pam.d/su 文件,找到"#auth required /lib/security ...

  3. [双连通分量] POJ 3177 Redundant Paths

    Redundant Paths Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 13712   Accepted: 5821 ...

  4. CSS样式选择器优先级

    CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...

  5. Django+python+BeautifulSoup垂直搜索爬虫

    http://blog.sina.com.cn/s/blog_709475a10100wmln.html

  6. php超全局数组变量

    (1)$_SERVER 服务器的相关信息 (2)$_GET 接收用户通过url向服务器传的参数  $POST 接收用户通过http协议向服务器传递的参数 发送get请求 <a href=&quo ...

  7. jetty和tomcat启动项目

    首先jetty和tomcat区别,不全面说,只说我理解的.jetty架构比tomcat更为简单.jetty是基于Handler来实现的,易于拓展,因此更适合于同时处理且长时间保持连接:tomcat的架 ...

  8. ubuntu下内核源码树的建立

    参考的博文: http://www.360doc.com/content/12/0604/12/8890849_215794364.shtml http://www.cnblogs.com/pd520 ...

  9. Centos上的安装openoffice+unoconv+swftools (转)

    ############################## #    swftools的安装     # ############################## 1.安装所需的库和组件 yum ...

  10. .net 获取AppDomain创建了多少

    partial class HttpBrowser { public static string IsolateCall(PageContentHandler pHandler) { Contract ...