赞
踩
HLS (HTTP Live Streaming)是Apple公司研发的流媒体传输技术,包括一个m3u8的索引文件、多个ts分片文件和key加密串文件。这项技术主要应用于点播和直播领域。
开源JS库(Github):
【video.js】https://github.com/videojs/videojs-contrib-hls
【hls.js】https://github.com/video-dev/hls.js/
腾讯视频SDK(TCPlayerLite),文档地址:https://cloud.tencent.com/document/product/881/20207
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>videojs-contrib-hls embed</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> </head> <body> <h1>Video.js Example Embed</h1> <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" data-setup='{}'> <source src="http://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" type="application/x-mpegURL"> </video> <script> </script> </body> </html>
注:可以指定多个source标签。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>前端播放m3u8格式视频</title> <link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet"> <script src='https://vjs.zencdn.net/7.4.1/video.js'></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js" type="text/javascript"></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://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/48c8a9475285890781000441992/playlist.m3u8" type="application/x-mpegURL"></source> </video> </div> <div class="qiehuan" style="width:100px;height: 100px;background: red;margin:0 auto;line-height: 100px;color:#fff;text-align: center">切换视频</div> </body> <script> // videojs 简单使用 var myVideo = videojs('myVideo', { bigPlayButton: true, textTrackDisplay: false, posterImage: false, errorDisplay: false, }) myVideo.play() var changeVideo = function (vdoSrc) { if (/\.m3u8$/.test(vdoSrc)) { //判断视频源是否是m3u8的格式 myVideo.src({ src: vdoSrc, type: 'application/x-mpegURL' //在重新添加视频源的时候需要给新的type的值 }) } else { myVideo.src(vdoSrc) } myVideo.load(); myVideo.play(); } var src = 'http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/f865d8a05285890787810776469/playlist.f3.m3u8'; document.querySelector('.qiehuan').addEventListener('click', function () { changeVideo(src); }) </script>
第一步: 直接安装 兼容7.0 video.js
npm install vue-video-player videojs-contrib-hls --save
第二步: main.js 引入video-js.css
import 'video.js/dist/video-js.css'
第三步:组件页面
<template> <div style="padding-top: 30px; width: 100%; height: 360px; position: relative;"> <video id="video" preload="auto" muted class="video-js vjs-default-skin" style="width: 100%; height: 100%; object-fit: fill" > <source src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" type="application/x-mpegURL" /> </video> </div> </template> <script> import videojs from 'video.js' import 'videojs-contrib-hls' export default { mounted () { this.$nextTick(() => { this.getVideo() }) }, methods: { getVideo () { videojs('video', { bigPlayButton: true, textTrackDisplay: false, posterImage: false, errorDisplay: false, controls: true, hls: { withCredentials: true } }, function () { this.play() }) } } } </script>
1、验证m3u8视频地址是否可用的工具
2、主要参考链接:vue组件播放m3u8格式视频
3、其他参考链接:Vue Video.js播放m3u8视频流格式(video+videojs-contrib-hl)
4、video.js官网链接
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。