web前端播放视频基础(多种格式,mp4, ogg, flv)(普通项目和vue项目)

2024-06-15 03:06| 来源: 网络整理| 查看: 265

前端播放视频(满足一般播放条件)

话不多说,先上代码: 以下包含我能做出来可以做出来播放的视频格式(测试ok),可能还有ogg和wmv的格式可以播放,但我没测试通过,所以不展示

if(strT == "video/mp4"||//.mp4文件 strT == "video/webm"||//.webm文件 strT == "flv"||//.flv文件 strT == "video/x-matroska"||//.mkv文件 strT == "video/quicktime"||//.mov文件 strT == "application/x-shockwave-flash"//.swf文件 ){} video标签可播放的视频格式

video标签可播放的视频格式为mp4, ogg 代码:

播放.swf文件播放flv文件(这个有点复杂)

这里需要特殊注意,flv文件比较特殊,在video标签需要加上 muted属性,因为音频转码可能会转码失败导致整段视频无法播放. flv.js是bilibili开发,大致的播放方法是把flv文件转成一小段一小段的mp4格式(再往深处说就是指用代码标记人物动作,而不储存人物图像), 所以占用资源小,加载速度快.但是目前好像没有成熟的前端播放插件(也可能是我孤陋寡闻),本人亲测一般的mp4用格式工厂转成的.flv文件无法播放,但确实有flv文件可以播放. ①, 下载flv.js (我这里是直接引用的) 链接：https://pan.baidu.com/s/1bs87QKSxgkk_VXamKEzTwg 提取码：flvj 复制这段内容后打开百度网盘手机App，操作更方便哦–来自百度网盘超级会员V4的分享普通html直接引入即可 html项目

vue项目

import flv from'../../../static/js/flv.min.js'

② 初始化video播放器,让其能播放flv文件 vue 和 html都适用:

javascript(vue和html都适用)

// 在js中flv改为flvjs即可,flvjs是默认的参数 if(flv.isSupported()){ setTimeout(function(){ // 这里加了个200ms的定时器,原因是因为抓取元素之后vue无法瞬间响应 var videoElement = document.getElementById('videoElementByFlv') that.flvPlayer = flv.createPlayer({ url:"src", type: 'flv', }) that.flvPlayer.attachMediaElement(videoElement) that.flvPlayer.load() },200) } vue安装vue-aplayer

①,下载安装

npm install vue-aplayer –save

②, 引入

import Aplayer from 'vue-aplayer' // 注意components注册位置 components: {Aplayer}

③, html中注册元素

④, js中定义

playerOptions:{// 视频配置 playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度 autoplay: false, //如果true,浏览器准备好时开始回放。 muted: false, // 默认情况下将会消除任何音频。 loop: false, // 导致视频一结束就重新开始。 preload: 'auto', // 建议浏览器在加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持） language: 'zh-CN', aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"） fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。 sources: [{ type: "video/mp4",// 播放视频格式 src: "XXXXXXXXXXXXXXXXXXXXXXX",//url地址 // src: "" //url地址 }], poster: "", //你的封面地址 // width: document.documentElement.clientWidth, notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。 controlBar: { timeDivider: true, durationDisplay: true, remainingTimeDisplay: false, fullscreenToggle: true //全屏按钮 } }, // 需要注意改动路径时 playerOptions.sources[0].src

【本文地址】

公司简介

联系我们