html中 videojs 播放m3u8文件【方式一】

1. 播放效果

2. 实现代码

如果你直接打开html播放不了，请更换src，因为http://live3.jogyhg.com/live/jr7owi3l160igq0_03c0e113e94d32ce48a8e5b0a791ce24.m3u8 可能已经失效了。

<!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://unpkg.com/video.js/dist/video.js"></script><script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script><!-- videojs-contrib-hls 用于在电脑端播放 如果只需移动端播放可以不引入 --></head><body><style>.video-js .vjs-tech {position: relative !important;}</style><div><video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}'style='width: 100%;height: auto'><source id="source" src="http://live3.jogyhg.com/live/jr7owi3l160igq0_03c0e113e94d32ce48a8e5b0a791ce24.m3u8" type="application/x-mpegURL"></source></video></div></body><script>var myVideo = videojs('myVideo', {bigPlayButton: true,textTrackDisplay: false,posterImage: false,errorDisplay: false,})myVideo.play()var changeVideo = function(vdoSrc) {if (/\.m3u8$/.test(vdoSrc)) {myVideo.src({src: vdoSrc,type: 'application/x-mpegURL'})} else {myVideo.src(vdoSrc)}myVideo.load();myVideo.play();}</script>

vue方式播放参考：Vue Video.js播放m3u8视频流格式（video+videojs-contrib-hl）

html中 videojs 播放m3u8文件【方式一】相关推荐

在vue3中使用videojs播放 .m3u8格式文件
最近项目中有做视频播放,但是由于视频量大,所以后端处理用的是把视频切片放在m3u8里给前端,然后前端自己播放. 什么是M3U8文件呢?M3U8文件是指UTF-8编码格式的M3U文件.M3U8文件是记录 ...
vue使用原生videojs 播放m3u8格式的视频——播放m3u8格式视频（一）
vue使用原生video播放m3u8格式的视频 1.安装依赖 2.页面引入插件(这里我是页面单独引入,减少项目体积) 3.页面中的使用常见问题 4.实现过程 5.实现.m3u8格式视频播放方法 1. ...
使用videojs播放m3u8视频
vue3使用videojs 播放m3u8格式视频 videojs是一个播放视频的js库,可以通过videojs结合videojs-contrib-hls实播放m3u8格式视频.流媒体传输协议(hls) ...
WPF 播放m3u8文件(使用Vlc库，支持在线和离线播放)
简介: 目前主流的播放器都是调用VLC库(支持视频类型比较多且功能强大),主流视频网站采用的是流媒体传输协议(就是将一段视频切成无数个小段,这几个小段就是ts格式的视频文件,一段一段的 ...
基于ffmpeg的播放器，播放m3u8文件时，seek问题
文章目录 1,准备知识, seek代码流程: 策略: 2,问题描述, 3,原因分析及其修改, 拿到这个问题,在不debug代码或查看日志的情况下,根据上面1的准备知识,可以大概判断出原因. 针对问题视 ...
videojs播放m3u8后缀视频Demo
videojs播放m3u8后缀视频Demo 转载自:https://segmentfault.com/a/1190000024447688 <!DOCTYPE html><html ...
解决Ubuntu 18.04中无法播放MP4文件的问题
遇到的问题在Ubuntu 18.04中无法播放MP4文件,提示播放该文件需要H.264(主配置文件)解码器. 测试机型:联想邵阳E42 测试时间:2020年9月5日测试系统:18.04 解决方法 ...
CKPlayer播放M3U8文件 (加载失败)问题
官网下载: ckplayer csdn下载: csdn 下载本地以后, 解压ckplayer.zip, 里面有示例文件, index.html, flashplayer.html等, index.ht ...
PHP中两种包含文件方式、三种注释风格、四种标记风格
2019独角兽企业重金招聘Python工程师标准>>> 一.两种包含文件的方式 ①require语法格式:require("文件名"):这个函数通常放在PHP程序 ...

html中 videojs 播放m3u8文件【方式一】

1. 播放效果

2. 实现代码

html中 videojs 播放m3u8文件【方式一】相关推荐

最新文章

热门文章