如何在html中播放.flv格式的视频【vue和普通html皆可用】_html播放flv_亚卡卡的那年的博客-程序员宅基地

技术标签: flv.js  前端  vue .flv视频  javascript  

前言

之前一直主要做微信小程序方面的内容,视频播放这块一直没怎么在意视频格式的问题,最近开发了一个律所的官网项目,涉及到大量flv格式的视频,让用户转成mp4工作量太大,所以就找了找,如何在html中播放.flv格式的视频。

正文

目前主流浏览器不能直接嵌入并且播放FLV文件,所以直接用video标签播放是行不通的,网上查了一下,发现有两种常用方法:

  1. 借助一个html标签object,来嵌入一个swf媒体播放文件,并利用该文件来播放你预设的文件。
  2. 利用B站开源的flv.js 通过将FLV文件流转换为ISO BMFF(Fragmented MP4)段,然后<video>通过Media Source Extensions API 将mp4段提供给HTML5 元素。

第一种方法

首先来说一下第一种方法,需要借助一个swf媒体播放文件,网上文章中大多数下载的媒体文件都不能正常工作(坑人啊),所以最后自己找了一个可用的上传到阿里云上,地址: swf播放器
.flv格式视频地址 下面代码中示例地址为 https://file.njshushuo.com/8d2164883f65d1f78180b3fcc159d282 。 实际开发时将其替换为自己的地址。附上代码:

<object
    classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
    codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
    width="640"
    height="480"
    id="VideoPlayer"
    align="middle"
  >
    <param name="allowScriptAccess" value="*" />
    <param name="allowFullScreen" value="true" />
    <param
      name="movie"
      value="./flvplayer.swf?video=https://file.njshushuo.com/8d2164883f65d1f78180b3fcc159d282&autoplay=true"
    />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#ffffff" />
    <embed
      src="./flvplayer.swf"
      flashvars="vcastr_file=https://file.njshushuo.com/8d2164883f65d1f78180b3fcc159d282" 
      quality="high"
      bgcolor="#000000"
      width="500"
      height="380"
      name="VideoPlayer"
      align="middle"
      allowScriptAccess="*"
      allowfullscreen="true"
      type="application/x-shockwave-flash"
      pluginspage="http://www.macromedia.com/go/getflashplayer"
    />
  </object>

将html打开,果然.flv格式能够播放了,外观也挺不错。
图片

放入vue项目中,却遇到了一个坑,那就是swf文件不能为相对路径,需要改成网络绝对路径,否则加载不到。
ok,大功告成!
然而这种方法主要是利用flash插件完成的,需要浏览器安装flash插件,而对于普通用户而言:

  1. 安装flash困难
  2. 如果禁用了flash,再次开启也存在一定的困难。

另外,flash播放还存在 稳定性 和cpu占用率高的缺点。同时,由于该项目支持移动端,而移动端并没有flash插件,所以只能放弃第一种方法

第二种方法

然后开始研究flv.js, 附上B站flv.js的github地址 https://github.com/Bilibili/flv.js

简介

flv.jsbilibili网站开源的使用纯JavaScript而不使用Flash编写的HTML5 Flash视频(FLV)播放器。通过将FLV文件流转换为ISO BMFF(Fragmented MP4)段,然后<video>通过Media Source Extensions API 将mp4段提供给HTML5 元素。
flv.js用ECMAScript 6编写,由Babel Compiler编译成ECMAScript 5 ,并与Browserify捆绑在一起。

优势

  • 带有H.264 + AAC / MP3编解码器播放的FLV容器
  • 多部分分段视频播放
  • HTTP FLV低延迟直播流播放
  • FLV 通过 WebSocket 实时流播放
  • 兼容Chrome,FireFox,Safari 10,IE11和Edge
  • 极低的开销,以及浏览器加速的硬件!

附上代码

<script src="flv.min.js"></script>
<video id="videoElement"></video>
<script>
    if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement');
        var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: 'http://example.com/flv/video.flv'
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
    }
</script>

将其放在vue项目中, 通过 npm install flv.js引入 flv.js,创建一个mvideo组件,代码如下:

<template>
  <div class="video">
    <video
      class="video-component"
      ref="videoElement"
      controls
      autoplay
    >Your browser is too old which doesn't support HTML5 video.</video>
  </div>
</template>
<script>
import flvjs from "flv.js";
export default {
  name: "Video",
  props: {
    types: {
      type: String,
      default: "flv"
    },
    url: {
      types: String,
      default: ""
    }
  },
  data() {
    return {
      flvPlayer: null
    };
  },
  watch: {
    url() {
      if (this.flvPlayer) {
        this.flvPlayer.detachMediaElement();
        this.flvPlayer.destroy();
      }
      this.createVideo();
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.createVideo();
    });
  },
  methods: {
    createVideo() {
      const videoElement = this.$refs.videoElement;
      this.flvPlayer = flvjs.createPlayer({
        type: this.types,
        url: this.url
      });
      this.flvPlayer.attachMediaElement(videoElement);
      this.flvPlayer.load();
    }
  }
};
</script>

使用:<w-video :url="imgUrl + item.videoFileId" :types="item.videoFileType" />

flv.js的缺点在于 需要知道该资源的文件类型,在createPlayer时,传入type

switch (mds.type) {
	case 'flv':
    	return new FlvPlayer(mds, optionalConfig);
	default:
    	return new NativePlayer(mds, optionalConfig);
}

文末

好了,两种方法都介绍完了,总体而言,第一种方法需要flash插件,稳定性和cpu占用率高,且不支持移动端。第二种方法则需要提前知道视频的格式,具体怎么选择就要根据自己的项目抉择了。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_45316326/article/details/99053910

智能推荐

blender怎么移动骨骼_Blender入门最最最基础的操作(附脑图)_陈思荣的博客-程序员宅基地

前段时间我曾经发布过一篇关于blender的微头条,发现大家对blender挺感兴趣,但是想要体验却面临找不到学习资料或者学习资料过于系统庞大。所以我整理一些基本的操作,让大家能够直接上手体验一下,在文章的最后附上我在初学blender的时候整理的一份脑图,希望对大家有所帮助。1.如果你的blender默认不是中文,可以先设置为中文环境。注意下面的新键数据那个选项不要勾选。2.大家不要被眼花缭乱的..._blender骨骼怎么动

JAVA定时执行任务,每天定时几点钟执行任务(Timer)_java定时任务指定每天几点更新_曹恭铖的博客-程序员宅基地

JAVA定时执行任务,每天定时几点钟执行任务转自:https://www.cnblogs.com/longshiyVip/p/4546123.htmlJAVA定时执行任务,每天定时几点钟执行任务的示例如下:1.建立TimerManage类,设置时间点,时间点设置的管理类,代码如下:package com.pcitc.time;import java.util.Calendar..._java定时任务指定每天几点更新

overlay技术--理解VXLAN(L2 over UDP)、NVGRE(L2 over GRE)、STT(L2 over TCP)_nvgre报文格式_网络安全研发随想的博客-程序员宅基地

VPC简介VPC即virtual private cloud。随着云计算的不断发展,对虚拟化网络的安全要求越来越高。 比较早的解决方案,是将虚拟机的网络和物理网络融合在一起,形成一个扁平的网络架构,例如大二层网络。这种类似的方案,随着虚拟化网络规模的增大,ARP欺骗、广播风暴、主机扫描等问题会越来越严重。为了解决这些问题,出现了各种网络隔离技术,把物理网络和虚拟网络彻底隔开。其中一种..._nvgre报文格式

mysql导入图片数据_mysql中如何导入图片_南宫曲直的博客-程序员宅基地

方法1:navicat选中某行数据的blob字段方法2:load_file注意事项:1-开启secure_file_privshow variables like ‘%secure_file_priv%’;值为null,则需要修改my.ini/my.cnf文件修改配置保存文件,重启服务2-图片文件名称里面包含中文字符,可能读取不到图片,需要重命名方法:在图片文件夹增加一个获取文件名的bat,内容:DIR *.* /B >LIST.csv借助excel生.._mysql中如何导入图片

CentOs7 yum安装JDK配置环境变量_linux安装jdk yum用不用环境变量_我爱我头像的博客-程序员宅基地

查看系统是否安装过javayum list installed | grep java如果有旧版本的jdk,先卸载jdkyum -y remove java-1.8.0-openjdk*查看可下载的jdk yum -y list java*4.下载安装java1.8的所有软件包yum installjava-1.8.0-openjdk* 5.安装成功,输入如下命令检..._linux安装jdk yum用不用环境变量

如何在 Windows 11 上安装 RSAT 远程服务器管理工​​具_知识大胖的博客-程序员宅基地

如何在 Windows 11 上安装 RSAT 远程服务器管理工​​具问题描述与以前版本的 Windows 操作系统相比,此在 Windows 11 上安装远程服务器管理工​​具 (RSAT) 的过程已简化且更容易。按照以下解决方案步骤在新的 Windows 11 上安装 RSAT。内容摘要PowerShell 命令检查是否安装了 RSAT 功能从设置应用程序安装 RSAT 组件使用 PowerShell 安装 RSAT在 Windows 11 上运行 RSAT 工具1. PowerS_rsat

随便推点

于是就来到第三节_(:зゝ∠)_运算符重载__(:зゝ∠)_。。 1 ∫: 。_Sorhe的博客-程序员宅基地

1、运算符重载=。=,自己定义的类可能使用到的运算符的功能不同,比如+,-,*等在向量里就有着不同的意义。于是我们来看看一个简单的Vector2类 class Vector2 { public int x { get; set; } public int y { get; set; } public Vector2() __(:зゝ∠)_。。 1 ∫: 。

Linux centos 7安装python库和numpy_numpy如何在centos中安装_King Blog的博客-程序员宅基地

1.安装pip首先安装EPEL扩展源:sudo yum -y install epel-release2.然后安装pip,如果直接使用 yum -y install pip 会报错,所以要先安装EPEL: sudo yum -y install python-pip3.安装Numpy先升级pip`sudo python -m pip install --upgrade pip`4.安装sudo pip install numpy..._numpy如何在centos中安装

WinCE驱动开发问题精华集锦_yizhou2010的博客-程序员宅基地

1、在应用程序中,如何向修改本机的ip 地址等网络参数,并使之立即生效? 网络设置保存在注册表中,位置[HKEY_LOCAL_MACHINE/Comm/网卡名称/Parms/TcpIp],例如常见的CS8900网卡设置: [HKEY_LOCAL_MACHINE/Comm/CS89001/Parms/TcpIp] "EnableDHCP"=dword:0

关于keil编译报.sct (7): error: L6236E: No section matches selector - no section to be FIRST/LAST.处理方法_liru12312的博客-程序员宅基地

使用keilUvision5向下兼容,选择S3C2440主款芯片编译运行汇编语言。出现了一个错误:. \objectslex3-2.sct (7): error: L6236E: No section matches selector - no section to be FIRST/LAST.我在网上搜了很多,没有找到适合修正我这里的错误的。故咨询陈老师,终于将这个错误解决。错误如下:修改过程:打开小仙女棒将linker的Use Memory Layout fromTarget Dial

Linux内核态抢占机制分析_preemptible kernel 和completely preempt的区别_metaxen的博客-程序员宅基地

【摘要】本文首先介绍非抢占式内核(Non-Preemptive Kernel)和可抢占式内核(Preemptive Kernel)的区别。接着分析Linux下有两种抢占:用户态抢占(User Preemption)、内核态抢占(Kernel Preemption)。然后分析了在内核态下:如何判断能否抢占内核(什么是可抢占的条件);何时触发重新调度(何时设置可抢占条件);抢占发生的时机(何时检查可抢_preemptible kernel 和completely preempt的区别

SSM框架整合+简单案例实现_ssm框架实例_温文艾尔的博客-程序员宅基地

SSM框架整合+简单案例实现文章目录前言一、Spring+SpringMVC+Mybatis框架整合1.建立一个新的web项目2.所需jar包3.建立数据库表与实体类之间的映射4.web.xml5.数据库信息db.properties6.Spring与Mybatis的整合7.SpringMVC基本配置二、整合测试1.结构展示2.studentMapper.xml3.studentMapper.java接口4.StudentService接口5.StudentServiceImpl6.StudentCont_ssm框架实例

推荐文章

热门文章

相关标签