html播放m3u8格式视频

本文详细介绍了如何使用HTML5的<video>标签播放M3U8格式的视频,结合Java后端Servlet处理视频流,以及前端JavaScript进行交互控制,实现流畅的在线视频播放体验。
摘要由CSDN通过智能技术生成
$(document).on('click', '.m3u8_video_click', function (event) {
        event.preventDefault();
        var self = $(this);
        var url = self.attr("href");
        var id = self.attr("data-id");
        var title = self.attr("title");
        var modal_dom = $('<div class="modal" id="normal_modal" data-backdrop="static"></div>');
        var modal_dialog_dom = $('<div class="modal-dialog"></div>');
        var modal_content_dom = $('<div class="modal-content"></div>');
        var modal_header_dom = $('<div class="modal-header"></div>');
        var header_dom_html = '<button type="button" class="close" data-dismiss="modal">&times;</button>' +
            '<h4 class="m
Vue 3 可以使用第三方的视频播放库来实现播放 .265 M3U8 格式视频。一个常用的库是 `video.js`,它是一个开源的 HTML5 视频播放器。以下是一个示例代码: 首先,安装 `video.js` 和 `videojs-contrib-hls`(用于支持 M3U8 格式): ```bash npm install video.js npm install videojs-contrib-hls ``` 然后,在 Vue 组件中使用 `video.js`: ```html <template> <div> <video ref="videoPlayer" class="video-js vjs-default-skin" controls></video> </div> </template> <script> import videojs from 'video.js'; import 'video.js/dist/video-js.css'; import 'videojs-contrib-hls'; export default { mounted() { // 创建 video.js 实例 this.player = videojs(this.$refs.videoPlayer, { techOrder: ['html5'] }, () => { // 播放 M3U8 格式视频 this.player.src({ src: '视频地址.m3u8', type: 'application/x-mpegURL' }); }); }, beforeDestroy() { // 销毁 video.js 实例 if (this.player) { this.player.dispose(); } } }; </script> <style> /* video.js 样式 */ @import '~video.js/dist/video-js.css'; </style> ``` 在上述代码中,我们首先导入并引入了 `video.js` 和 `videojs-contrib-hls` 库。然后,在组件的 `mounted` 钩子函数中,创建了一个 `video.js` 实例,并设置 `techOrder` 为 `['html5']`,表示优先使用 HTML5 播放器。 在 `video.js` 的回调函数中,使用 `player.src()` 方法来设置视频源,其中 `src` 为视频地址,`type` 为视频类型,这里是 M3U8 格式视频。 最后,在组件的 `beforeDestroy` 钩子函数中,销毁 `video.js` 实例。 在使用时,将视频地址替换为实际的 .265 M3U8 格式视频的地址即可。希望对你有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值