vue工程下播放视频

vue工程下播放视频

  • 安装插件

    npm install --save video.js
    npm install --save videojs-contrib-hls
  • 导入css
    import 'video.js/dist/video-js.css'
  • 导入js
    import videojs from 'video.js'
    import 'videojs-contrib-hls
  • 指定播放容器
    <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" poster="../assets/video.png">
     <source src="http://xxx/1.m3u8" type="application/x-mpegURL">
    </video>
  • 在mounted上
    videojs('my-video', {
         bigPlayButton: false,
         textTrackDisplay: false,
         posterImage: true,
         errorDisplay: false,
         controlBar: true
        },
        function () {
          this.play()
      }
    )

原文地址:https://www.cnblogs.com/wuxiaoshi/p/11756616.html

时间: 2024-10-12 16:22:53

vue工程下播放视频的相关文章

H5 播放视频常见bug及解决方案

本文摘自:本文来自“小时光茶社(Tech Teahouse)”公众号 原文:https://mp.weixin.qq.com/s/MM5ZwCiWLAeHalsNYMImnw 1. 自动播放问题 通过autoplay属性视频的自动播放需要在video标签上添加autoplay属性, 如: <video autoplay><video/> 但是在很多浏览器里,如iOS下并不支持这个属性,在iOS下必须给webview设置: self.wView.allowsInlineMediaPl

解决Android微信HTML5 播放视频的问题(不显示控制条,可交互)

首先你需要知道以下内容: http://ad.weixin.qq.com/learn/2-3-3--%E9%80%9A%E7%94%A8%E5%BA%93 这是微信为广告商开放的API,我一直认为只有在微信投广告才能正常使用. 但是就在刚刚我尝试了一下,直接调用也是可以的(而且没有广告,至少目前是这样) 我们这里用到了微信提供的视频接口 :(点击上面的链接,速去查看) 这样直接解决了 android 微信下 播放视频会调用特殊播放器播放的情况.(为什么?请看文末) 但是这样虽然解决了播放“层”的

IIS主机在某些情况下无法播放视频的设置方法

默认情况下,Windows Server的IIS主机是不支持FLV文件类型,通过http访问是无法播放视频. MIME类型就是设定某种扩展名的文件用一种应用程序来打开的方式类型,当该扩展名文件被访问的时候,浏览器会自动使用指定应用程序来打开. 设置MIME,让IIS支持更多文件类型. 在IIS中添加FLV的MIME类型: IIS里面的站点属性->http头->添加Mime类型 扩展名填写:.flv Mime类型填写:flv-application/octet-stream 重新启动该站点 其它

手机影音第七天 视频的播放下一个视频功能实现,视频进度、电量变化的实现

先看下效果图: 在这里,视频进度条会根据视频播放变化,下方的按钮中,播放下一个,上一个都已实现. 代码已经托管到码云上,想下载看的小伙伴可以从下方地址中获取 https://git.oschina.net/joy_yuan/MobilePlayer 1.在这张图上,自定义的显示电量的那一列已经被系统自带的状态栏遮盖,下面就说一下实现方法: 系统电量变化时,系统会发送一个广播,所有对这个广播感兴趣的activity都可以注册广播来接收这个广播.在这里接收系统电量变化,屏幕锁屏.开屏的广播,只能使用

Window 下 VFW 视频采集与显示

引言 经过几天的努力终于将VFW视频采集与显示功能完整实现了,不得不说网上对这方面完整的详细讲解文章是在太少了.所以就要本人来好好总结一下让后来者不再像我一样折腾好久.在本文中我将详细讲解VFW视频采集过程的实现,以及采集后视频的显示方法. VFW简介 虽然这是篇技术博文,但是我觉得用一个东西,那么关于它的概述还是不能少,所以特从百度上copy了下VFW的概念描述,如果读者不想看可以直接去观看正文部分. VFW(Video for Windows)是Microsoft推出的关于数字视频的一个软件

Unity+高通Vuforia SDK——AR播放视频

在之前的文章中我们已经实现了基本的图片识别,并在识别的图片上显示3D模型,但是有的时候我们实际上需要在识别的图片上播放一段视频,那么接下来我们就来说说如何实现这样的操作. 一.资源下载: 这里我们需要准备的资料如下: 1.一段.m4v格式的视频: 其他格式的视频可以通过格式转换成.mp4格式,然后修改后缀名为.m4v,即mp4和m4v是可以互转的: 2.Vuforia官方提供的一个Video Playback组件: 下载地址在官网Downloads/Samples(链接地址)下面的Advance

Cocos2d-x Lua 播放视频(iOS&amp;android)

最近刚转了游戏,来公司不久就接到一个任务就是做一个视频播放的功能,自己花了3天时间,暂时实现了一个简易的功能,特写篇博客,以作记录. 参考地址如下: http://blog.csdn.net/xiaominghimi/article/details/6870259 http://blog.csdn.net/kaitiren/article/details/11832851 http://blog.csdn.net/candyforever/article/details/8905852 实现功能

1使用NGUI播放视频

使用movietexture,但是里面只有play,stop,pause  3个方法 Unity3D 原生就支持视频播放的,不是UITexture而是用MovieTexture.MovieTexture.Playe(); 播放MovieTexture.Pause();暂停MovieTexture.Stop();停止 MovieTexture.loop = true;意思是循环播放,false意思是不循环播放 想把Unity中的3d渲染到你的texture上的话  使用Render Texture

DragVideo,一种在播放视频时,可以任意拖拽的方案

转载请把头部出处链接和尾部二维码一起转载,本文出自逆流的鱼yuiop:http://blog.csdn.net/hejjunlin/article/details/53638896 前言 项目已开源到我的github: https://github.com/hejunlin2013/DragVideo DragVideo A Method to Drag the Video When Playing Video 一种在播放视频时,能够拖拽的方案 为什么有这个工程 经常在爱奇艺网站上看电影,看到如