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

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

话不多说,先上代码:
     以下包含我能做出来可以做出来播放的视频格式(测试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