使用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. OLE填充EXCEL 多SHEET

    "1 设置行高 "参数说明:行/列号.行高/列宽.R-行 C-列 FORM row_column USING p_r p_width p_type. CASE p_type. WH ...

  2. varchar类型转换为numeric的值时有问题原因

    numeric的值不应该用单引号括起来...........

  3. 练习使用XRecyclerView，可上拉下拉刷新。

    package com.lixu.testxrecyclerview; import android.support.v7.app.AppCompatActivity; import android. ...

  4. Jquery之ShowLoading遮罩组件

    From:http://www.cnblogs.com/eczhou/archive/2012/12/18/2822788.html 一.遮罩用途及效果 ShowLoading这个jQuery插件设计 ...

  5. iOS7程序内部如何打开评分页面

    测试发现项目在iOS7下 无法打开评价页面,但是iOS6是正常: 查了一下发现应该是iOS7 改变链接了,有个网友给出了以下的解决办法 把旧的链接改成 appString =[NSStringstri ...

  6. fck编辑器漏洞想到的--目录的执行权限

    结合近来我遇到的问题,转一篇关于目录的执行权限问题.来解决fck编辑器的漏洞.漏洞就是给人家上传了文件,而且还遍历目录或者直接执行文件,,非常大大的危险. 解决方法如下. 1,首先要删除fckedit ...

  7. java.io.IOException: Too many open files

    1.描述: 每日一样,例行打开hadoop集群的cloudera manager的管理界面.发现出现了多个bad health的服务.那么出现的这个问题就是查看该服务运行的日志,对应的该服务当中,会包 ...

  8. IOS第三方字体

    项目中想使用第三方的字体,在stackoverflow上查询解决办法,也折腾一会,添加成功,示例如下: 1.将xx.ttf字体库加入工程里面 2.在工程的xx-Info.plist文件中新添加一行Fo ...

  9. Oracle帮助类

    /// <summary> /// Copyright (C) Maticsoft /// 数据访问基础类(基于Oracle) /// 可以用户可以修改满足自己项目的需要. /// < ...

  10. MQTT实现长连接,IM最简单实例

    1,引入MqttSDK. 2, 头文件 #import "MQTTSession.h" //定义主题#define kTopic @"lichanghong"/ ...