Vue 莹石摄像头直播视频实例代码


Posted in Javascript onAugust 31, 2018

Vue 莹石摄像头直播视频代码。

HTML代码:

<div class="mainClass" v-show="rtmp_url!=''">
 <video id="myPlayer" controls playsinline webkit-playsinline autoplay>
  <source type="application/x-mpegURL" :src="http_url"/>
  <source :src="rtmp_url"/>
 </video>   
</div>

直播地址是调用接口获取的。

<script>
export default {
  data(){
   return{
    player:"",
    rtmp_url:"",
    http_url:"",
    message:'加载中...',
   }
  },
  mounted(){ 
   this.GetLiveUrl();
  },
  methods:{
   GetLiveUrl(){
    //异步获取直播地址,并赋值给rtmp_url,http_url
   }
  },
  updated() {
   if(this.rtmp_url!=""){
    //如果在mounted中声明,直播地址还未取到,导致视频不显示。所以放在了这里
    this.player = new EZUIPlayer('myPlayer'); 
   }
  }
}
</script>

补充:vue H5项目调用手机摄像头录像并上传

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>上传文件</title>
 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 <style>
  input.file 
  {
   position: relative;
   -moz-opacity:0 ;
   filter:alpha(opacity: 0);
   opacity: 0;
   z-index: 2;
  } 
  .wrapper{
   color: #fff;
   background-color: #31b0d5;
   border-color: #269abc;
   margin-top: 5px;
   margin-bottom: 5px;
   display: inline-block;
   padding: 6px 12px;
   margin-bottom: 0;
   font-size: 14px;
   font-weight: 400;
   line-height: 1.42857143;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
   -ms-touch-action: manipulation;
   touch-action: manipulation;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   background-image: none;
   border: 1px solid transparent;
   border-radius: 4px;
  }
 </style>
</head>
<body>
 <div id="app" v-cloak>
  <h4>上传视频demo</h4>
  <div>
   <span type="primary" class="wrapper">
    <label class="btn" for="fileUpload">上传视频demo</label>
   </span>
   <input type="file" accept="video/*" id="fileUpload" style="position:absolute; clip:rect(0 0 0 0);" @change="uploadVideo($event)">
  </div>
 </div>
 <script>
 var app = new Vue({
  el: '#app',
  data: {
  },
  methods: {
   uploadVideo(e) {
    //e.target.value文件名
    var file = e.target.files[0];
    var formdata = new FormData();
    formdata.append('fileStream', file);
    console.log('正在上传视频...')
    this.doUpload(formdata);
   },
   doUpload(formdata) {
    axios.post('/teacher/doUpload', formdata).then(res => {
     if (res.data.success) {
      console.log('上传成功');
     } else {
      console.log('上传失败');
     }
    }).catch(err => {
     console.log(err);
    })
   }
  }
 });
 </script>
</body>
</html>

总结

以上所述是小编给大家介绍的Vue 莹石摄像头直播视频实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Moment.js 不容错过的超棒Javascript日期处理类库
Apr 15 Javascript
JavaScript加强之自定义callback示例
Sep 21 Javascript
js加入收藏以及使用Jquery更改透明度
Jan 26 Javascript
JavaScript自定义数组排序方法
Feb 12 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
Ajax 加载数据 练习代码
Jan 05 Javascript
Vue父子模版传值及组件传值的三种方法
Nov 27 Javascript
JS实现求5的阶乘示例
Jan 21 Javascript
微信小程序云开发之使用云存储
May 17 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
Aug 17 Javascript
vue实现短信验证码输入框
Apr 17 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 #Javascript
Vue加载组件、动态加载组件的几种方式
Aug 31 #Javascript
Bootstrap模态对话框用法简单示例
Aug 31 #Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 #Javascript
angular 实时监听input框value值的变化触发函数方法
Aug 31 #Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 #Javascript
JS实现字符串翻转的方法分析
Aug 31 #Javascript
You might like
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
PHP编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
zend framework多模块多布局配置
2011/02/26 PHP
浅析php中array_map和array_walk的使用对比
2016/11/20 PHP
学习javascript,实现插入排序实现代码
2011/07/31 Javascript
jQuery拖动图片删除示例
2013/05/10 Javascript
javascript实现动态改变层大小的方法
2015/05/14 Javascript
javascript引用类型之时间Date和数组Array
2015/08/27 Javascript
JS实现可关闭的对联广告效果代码
2015/09/14 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
浅析在javascript中创建对象的各种模式
2016/05/06 Javascript
当jquery ajax遇上401请求的解决方法
2016/05/19 Javascript
AngularJS 模块详解及简单实例
2016/07/28 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
Vue中div contenteditable 的光标定位方法
2018/08/25 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
利用原生JS实现data方法示例代码
2019/05/28 Javascript
在vue中使用vant TreeSelect分类选择组件操作
2020/11/02 Javascript
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
python操作xml文件详细介绍
2014/06/09 Python
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
python实现内存监控系统
2021/03/07 Python
在PyCharm中控制台输出日志分层级分颜色显示的方法
2019/07/11 Python
python openssl模块安装及用法
2020/12/06 Python
The North Face北面法国官网:美国著名户外品牌
2019/11/01 全球购物
销售经理工作职责
2014/02/03 职场文书
规划编制实施方案
2014/03/15 职场文书
司机岗位职责说明书
2014/07/29 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
西安事变观后感
2015/06/12 职场文书
房屋产权证明书
2015/06/19 职场文书
体育部部长竞选稿
2015/11/21 职场文书