浏览器播放m3u8文件

m3u8是苹果公司推出一种视频播放标准，是m3u的一种，不过编码方式是utf-8。

浏览器播放m3u8文件，这里使用video.js插件，下载地址： http://www.jq22.com/jquery-info404

下载最新版本v7.4.1，下载完成解压打开进入，index.html就是demo代码，修改<source>标签的src设置为m3u8的地址、type="application/x-mpegURL"。

例子：

<source src="http://recordcdn.quklive.com/upload/vod/user1462960877450854/1550739580345725/1/video.m3u8" type="application/x-mpegURL">

完整demo代码：

<!doctype html>
<html><head><meta charset="utf-8"><title>Video.js 7.4.1</title><link href="css/video-js.min.css" rel="stylesheet"><style>
body {background-color: #191919
}
.m {width: 960px;height: 400px;margin-left: auto;margin-right: auto;margin-top: 100px;
}
</style></head><body><div class="m"><video id="my-video" class="video-js" controls preload="auto" width="960" height="400"poster="m.jpg" data-setup="{}"><source src="http://recordcdn.quklive.com/upload/vod/user1462960877450854/1550739580345725/1/video.m3u8" type="application/x-mpegURL"><!-- <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm"><source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg"> --><p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a> </p></video><script src="js/video.min.js"></script> <script type="text/javascript">//设置中文videojs.addLanguage('zh-CN', {"Play": "播放","Pause": "暂停","Current Time": "当前时间","Duration": "时长","Remaining Time": "剩余时间","Stream Type": "媒体流类型","LIVE": "直播","Loaded": "加载完毕","Progress": "进度","Fullscreen": "全屏","Non-Fullscreen": "退出全屏","Mute": "静音","Unmute": "取消静音","Playback Rate": "播放速度","Subtitles": "字幕","subtitles off": "关闭字幕","Captions": "内嵌字幕","captions off": "关闭内嵌字幕","Chapters": "节目段落","Close Modal Dialog": "关闭弹窗","Descriptions": "描述","descriptions off": "关闭描述","Audio Track": "音轨","You aborted the media playback": "视频播放被终止","A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。","The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。","The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。","No compatible source was found for this media.": "无法找到此视频兼容的源。","The media is encrypted and we do not have the keys to decrypt it.": "视频已加密，无法解密。","Play Video": "播放视频","Close": "关闭","Modal Window": "弹窗","This is a modal window": "这是一个弹窗","This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按键或启用关闭按钮来关闭此弹窗。",", opens captions settings dialog": ", 开启标题设置弹窗",", opens subtitles settings dialog": ", 开启字幕设置弹窗",", opens descriptions settings dialog": ", 开启描述设置弹窗",", selected": ", 选择","captions settings": "字幕设定","Audio Player": "音频播放器","Video Player": "视频播放器","Replay": "重播","Progress Bar": "进度小节","Volume Level": "音量","subtitles settings": "字幕设定","descriptions settings": "描述设定","Text": "文字","White": "白","Black": "黑","Red": "红","Green": "绿","Blue": "蓝","Yellow": "黄","Magenta": "紫红","Cyan": "青","Background": "背景","Window": "视窗","Transparent": "透明","Semi-Transparent": "半透明","Opaque": "不透明","Font Size": "字体尺寸","Text Edge Style": "字体边缘样式","None": "无","Raised": "浮雕","Depressed": "压低","Uniform": "均匀","Dropshadow": "下阴影","Font Family": "字体库","Proportional Sans-Serif": "比例无细体","Monospace Sans-Serif": "单间隔无细体","Proportional Serif": "比例细体","Monospace Serif": "单间隔细体","Casual": "舒适","Script": "手写体","Small Caps": "小型大写字体","Reset": "重启","restore all settings to the default values": "恢复全部设定至预设值","Done": "完成","Caption Settings Dialog": "字幕设定视窗","Beginning of dialog window. Escape will cancel and close the window.": "开始对话视窗。离开会取消及关闭视窗","End of dialog window.": "结束对话视窗"});var myPlayer = videojs('my-video');videojs("my-video").ready(function(){var myPlayer = this;myPlayer.play();});</script> </div>
</body>
</html>

浏览器播放m3u8文件相关推荐

WPF 播放m3u8文件(使用Vlc库，支持在线和离线播放)
简介: 目前主流的播放器都是调用VLC库(支持视频类型比较多且功能强大),主流视频网站采用的是流媒体传输协议(就是将一段视频切成无数个小段,这几个小段就是ts格式的视频文件,一段一段的 ...
基于ffmpeg的播放器，播放m3u8文件时，seek问题
文章目录 1,准备知识, seek代码流程: 策略: 2,问题描述, 3,原因分析及其修改, 拿到这个问题,在不debug代码或查看日志的情况下,根据上面1的准备知识,可以大概判断出原因. 针对问题视 ...
CKPlayer播放M3U8文件 (加载失败)问题
官网下载: ckplayer csdn下载: csdn 下载本地以后, 解压ckplayer.zip, 里面有示例文件, index.html, flashplayer.html等, index.ht ...
html中 videojs 播放m3u8文件【方式一】
1. 播放效果 2. 实现代码如果你直接打开html播放不了,请更换src,因为http://live3.jogyhg.com/live/jr7owi3l160igq0_03c0e113e94d32 ...
vue + ckplayer 直播播放m3u8文件，退出页面也会一直请求文件，还会有直播声音
退出直播页面也会一直请求这个比较难处理,因为一旦请求成功,就会一直推送直播流,没办法断开,只有刷新页面最简单的方法就是beforeRouteEnter 判断如果是直播页面跳转的就重新刷新下页面,就 ...
videojs 卡顿_流媒体技术学习笔记之（四）解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了...
总结: 说明: 测试环境:本测试全部来自阿里云直播和OSS存储点播以及本地服务器直播和点播播放器:VideoJs 直播: 1.阿里云直播,需要CDN设置HTTP头 2.本地直播需要设置直播访问服务器 ...
M3U8 文件介绍与播放方法
目录通俗点: 官方一点: M3U8文件内容: M3U8 文件播放: 补充通俗点: 播放音视频的时候,因为音视频文件较大,尤其是视频,所以通常会把音视频文件分成一个个的小块,而M3U8则是记录每个小 ...
在vue3中使用videojs播放 .m3u8格式文件
最近项目中有做视频播放,但是由于视频量大,所以后端处理用的是把视频切片放在m3u8里给前端,然后前端自己播放. 什么是M3U8文件呢?M3U8文件是指UTF-8编码格式的M3U文件.M3U8文件是记录 ...
m3u8文件在手机上用什么软件看_新技能Get！教你制作m3u8文件创建属于自己的直播视频列表...
得益于互联网的发展,网络视频平台成为如今观看视频的主要渠道,不管是电脑还是手机.甚至在智能电视中,我们更喜欢通过下载某平台的客户端进行观看.而这些平台虽然资源众多,但很少能看电视直播,就算能看,找起来 ...
关于H5播放视频文件的问题
m3u8文件是指UTF-8编码格式的M3U文件.M3U文件是记录了一个索引纯文本文件,打开它时播放软件并不是播放它,而是根据它的索引找到对应的音视频文件的路径进行播放. 简单说,播放器通过m3u8文件 ...

浏览器播放m3u8文件

浏览器播放m3u8文件相关推荐

最新文章

热门文章