web前端播放视频基础(多种格式,mp4, ogg, flv)(普通项目和vue项目)
前端播放视频(满足一般播放条件)一,话不多说,先上代码: 以下包含我能做出来可以做出来播放的视频格式(测试ok),可能还有ogg和wmv的格式可以播放,但我没测试通过,所以不展示if(strT== "video/mp4"||//.mp4文件strT== "video/webm"||//.webm文件strT == "flv"||//.flv
前端播放视频(满足一般播放条件)
话不多说,先上代码:
以下包含我能做出来可以做出来播放的视频格式(测试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
代码:
<video src="XXXXX" controls autoplay></video>
播放.swf文件
<embed src="XXX" controls autoplay>
播放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项目
<script src="flv.js"></script>
vue项目
import flv from'../../../static/js/flv.min.js'
② 初始化video播放器,让其能播放flv文件
vue 和 html都适用:
<video id="videoElementByFlv" class="flvplayer-app" controls autoplay muted></video>
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中注册元素
<video-player class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"
></video-player>
④, js中定义
playerOptions:{// 视频配置
playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
autoplay: false, //如果true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 导致视频一结束就重新开始。
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。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
更多推荐
所有评论(0)