关于前端项目不同格式视频文件播放的问题

我们都知道H5支持的视频格式,H264压缩的mp4, webm,ogg三种格式,如果要在前端页面直接播放不同格式的视频文件,基本都需要借助插件来实现。插件的基本思路应该是先转码到H5支持的视频流格式,然后再进行播放,应该还有其他的解决方案,这个我不是很了解。

今天就提供一种通过集成windows media player 插件,在线播放不同格式的视频文件的方法。

<!DOCTYPE html>
<html>

<body>
    <div class="m">
        <object id="MediaPlayer" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="100%" height="100%" standby="Loading Windows Media Player components…" type="application/x-oleobject" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112">
                    <param name="FileName" value="E:\BaiduNetdiskDownload\蒙古\test44.mov">
                    <param name="AutoStart" value="true">
                    <param name="ShowControls" value="true">
                    <param name="BufferingTime" value="2">
                    <param name="ShowStatusBar" value="true">
                    <param name="AutoSize" value="true">
                    <param name="InvokeURLs" value="false">
                    <param name="AnimationatStart" value="1">
                    <param name="TransparentatStart" value="1">
                    <param name="Loop" value="1">
                    <param name="container" value="#video">
                    <embed type="application/x-mplayer2" src="E:\BaiduNetdiskDownload\蒙古\test44.mov" name="MediaPlayer" autostart="1" showstatusbar="1" showdisplay="1" showcontrols="1" loop="0" videoborder3d="0" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" width="800" height="600"></embed>
                 </object>
    </div>
</body>

</html>    

运行效果如图

 

对,你没看错,这种方法有个硬伤,就是对浏览器有要求,亲测IE没有问题,可以播放。其他支持的浏览器还有360,火狐只支持MP4格式的播放。参考自https://blog.csdn.net/www_worf/article/details/80152060

链接里还推荐了video.js实现视频播放,实际在使用的时候,视频无法缓冲,无法对视频播放添加更多的控制,这个需要集成的时候做很多额外的工作,毕竟一个开源库和一个浏览器插件体量是有差别的。

 

相关推荐

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

老朱之三十而立

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值