html5播放m3u8 videojs 倍速播放属性

已于 2022-05-10 16:44:31 修改
阅读量1.1k 收藏 2
点赞数
分类专栏： js 文章标签： html5 webview 前端
于 2022-05-10 16:36:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fzxyxf1314/article/details/124691568
版权 
 <!--直接上干货-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>星星直播中</title>
	<script src="./jquery.min.js"></script>
	<script src="./jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script>
	<link href="./video-js-cdn.min.css" rel="stylesheet">
	<script src="./video.js"></script>
	<script src="./videojs-contrib-hls.min.js"></script>
</head>
<!--webkit-playsinline="true"  playsinline="true" 设置苹果手机上播放不自动全屏-->
<body>
<video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style='width: 100%;height: 550px'>
            <source id="source" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-uni4934e7b/c4d93960-5643-11eb-a16f-5b3e54966275.m3u8" 
			type="application/x-mpegURL">
			</source>
</video>
<script>
    var myVideo = videojs('myVideo', {
        bigPlayButton: true,
        textTrackDisplay: false,
        posterImage: false,
        errorDisplay: false,
        playbackRates: [0.5,0.8,1,2,4],// # 倍速播放配置
    })
	
    myVideo.play()

</script>
</body>
</html>

demo下载：下载

xingxingwuxin
关注
专栏目录
Vue3视频播放器组件Vue3-video-play入门教程
猿小白的博客
03-11 2万+
Vue3-video-play适用于 Vue3 的 hls.js 播放器组件 | 并且支持MP4/WebM/Ogg格式。1、支持快捷键操作2、支持倍速播放设置3、支持镜像画面设置4、支持关灯模式设置5、支持画中画模式播放6、支持全屏/网页全屏播放7、支持从固定时间开始播放8、支持移动端，移动端会自动调用自带视频播放器9、支持hls视频流播放，支持直播10、hls播放支持清晰度切换。
html5中使用video.js播放器播放m3u8直播文件，兼容微信浏览器自动播放（亲测有效）
11-30
html5中使用video.js播放器播放m3u8直播文件，兼容微信浏览器自动播放（亲测有效） 。
m3u8 videojs 倍速播放属性
t0m的专栏
02-10 7078
var myVideo = videojs('myVideo', { bigPlayButton: true, textTrackDisplay: false, posterImage: false, errorDisplay: false, playbackRates: [0.5,1,1.5,2,3], #...
html5中使用video.js播放器播放m3u8直播文件，兼容微信浏览器自动播放（ios亲测有效）
钟长森的博客
11-30 6248
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>正在直播中</title> <script src="https://act.mcake.com/fangli/2018/wap/commonjs/jquery.min.js"></script> <script src="http://.
HTML5点播m3u8(hls)格式视频
良_123的专栏
05-23 1万+
这两年来我们发现越来越多的视频应用使用了m3u8格式的视频，因为可以兼容PC、移动端。相比mp4等视频源，m3u8可以减轻服务器压力（按需加载）。HLS是由苹果公司率先提出的一种协议标准，可用于直播。 m3u8是一种基于HLS(HTTP Live Streaming) 文件视频格式，它主要是存放整个视频的基本信息和分片(Segment)组成。不同于mp4大文件，m3u8是由一系列的ts文件组成，...
HTML5播放m3u8(hls)格式视频以及播放直播m3u8(hls)视频完整代码
01-03
HTML5播放m3u8(hls)格式视频以及播放直播m3u8(hls)视频完整代码，Chrome + Firefox 
vue中使用videojs播放m3u8格式的视频
qq_42905523的博客
04-25 842
1.安装videojs npm install --save video.js 2.使用 <template> <div class="video-box"> <video id="video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" ></video> </di
HTML躬行记（4）——Web音视频基础
yinshipin007的博客
03-27 683
一个原始视频，若没有编码，则体积会非常大。假设图的分辨率是 1920*1080，帧率为 30，每像素占 24b，那没张图占 6.22MB左右，1 秒的视频大小是 186.6MB左右，1 分钟就是 11G了。M3U8 是使用 HLS 协议格式的基础，文件内容是一个播放列表（Playlist），采用 UTF-8 编码，记录了一些列媒体片段资源，顺序播放片段即可完整展示资源，如下所示。音频格式是指要在计算机内播放或处理的音频文件的格式，是对声音文件进行数、模转换的过程，常见的有 MP3、WAV、AAC 等。
在Vue中使用Aliplayer，做视频播放或者视频监控
qq_38086776的博客
01-08 4605
直接上干货，看代码 <template> <div id="videomonitoring"> <div> <el-card class="box-card"> <div style="height:600px"> ...
VUE项目使用easyplayer.js实现海康视频监控
poluocook的博客
08-12 4336
VUE项目使用easyplayer.js实现海康视频监控
Video.js 播放m3u8视频
01-22
Video.js 播放m3u8视频 videojs5.hlsjs.js组件 播放m3u8格式视频需要借助服务器 MP4可以直接播放，可以简单发布iis播放m3u8视频
m3u8 html本地播放器
02-10
videojs m3u8 html // videojs 简单使用 var myVideo = videojs('myVideo', { bigPlayButton: true, textTrackDisplay: false, posterImage: false, errorDisplay: false, playbackRates: [0.5,1,1.5,2,3], })
手机端videojs播放m3u8的文件.zip
08-06
手机端 安卓和ios 均可播放。 使用前请仔细看说明哦 在VUE 环境下使用 videojs播放m3u8的文件
html播放hls
枯树无花
12-29 1272
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>demo</title> <link href="https://vjs.zencdn.net/7.0.3/video-js.css" rel="stylesheet"> </head> <body> &l..
web前端HTML播放HLS在线视频流（m3u8）
热门推荐
Evil_0_0_0的博客
04-26 2万+
最近公司项目要对接在线的视频流（m3u8）,经过很长的一段时间找到两种可用比较靠谱好用的插件方法。参考的文章地址：https://www.jianshu.com/p/8845b976fcaf 先撤一点题外话，一开始是找的videojs，网上很多教程说可以播放HLS，但是本人没有找到靠谱的方法，videojs播放一个流地址，播放几秒就卡住了，也没找到解决方法。 开始正题： 1、一个插件hls....
如何在HTML中实现m3u8视频播放：多种解决方案大比拼
XiaoqiangClub的博客
09-10 467
如何在HTML中实现m3u8视频播放：多种解决方案大比拼
html中播放m3u8文件
qq_41732963的博客
04-13 1万+
更换有效src打开就行 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>播放m3u8格式</title> <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet"> <script src="https://unp
uniappH5使用video.js播放m3u8
最新发布
09-30
uniapp H5使用video.js播放m3u8需要经过一些步骤配置。Video.js是一个流行的HTML5视频播放器库，而m3u8是Apple HLS（HTTP Live Streaming）的一种manifest文件格式。 1. 首先，在项目中引入video.js库和对应的m3u8插件，如`videojs-contrib-hls`。可以在UniApp的main.js或页面的script标签中进行导入： ```javascript import videojs from 'video.js'; import 'videojs-contrib-hls'; ``` 2. 然后，创建一个video元素，并初始化video.js实例，设置源URL为m3u8链接： ```html <template> <div> <video id="my-video" class="video-js vjs-default-skin"></video> </div> </template> <script> export default { mounted() { const player = videojs('my-video', { techOrder: ['hls'], hls: { xhrSetup: function(xhr) { xhr.withCredentials = true; } }, // 如果有跨域需求，添加此行 sources: [{ type: 'application/x-mpegURL', src: '<your-m3u8-url>' }], controls: true, autoplay: false, // 根据需求设置是否自动播放 }); } }; </script> ``` 3. 把`<your-m3u8-url>`替换为实际的m3u8播放列表地址。 4. 当页面加载完成后，视频播放器会尝试从m3u8文件获取流并开始播放。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xingxingwuxin

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

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

打赏作者

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

抵扣说明：

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

余额充值