uni-app在H5平台使用video.js

一时失言乱红尘 2022-10-07 01:59 135阅读 0赞

# 前言 #

项目中用到了视频监控功能，而这部分功能还是外包给第三方做的，他们只提供了jquery+video.js的demo。uni-app中video是组件不是原生video标签，导致我无法按照demo来实现效果，当时采用了webview引用本地html的方案（非常拉胯） 。本来过去也就过去了，但是客户又改了页面布局，视频改为弹窗播放后出现了意料之外的问题导致ios无法播放，不得已只得寻求其他解决方案，最后找到了它。[查看原文][Link 1]

# 具体方案  #

> 1.创建模板文件index.html，在模版内引用video.js，在manifest.json内配置index.html路径

<!DOCTYPE html>  
    <html lang="zh-CN">  
        <head>  
            <meta charset="utf-8">  
            <meta http-equiv="X-UA-Compatible" content="IE=edge">  
            <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  
            <title>  
                <%= htmlWebpackPlugin.options.title %>  
            </title>  
            <script>  
                document.addEventListener('DOMContentLoaded', function() {  
                    document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'  
                })  
            </script>  
            <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.baseUrl %>static/index.css" />  
            <link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">  
            <script src="https://unpkg.com/video.js/dist/video.min.js"></script>  
        </head>  
        <body>  
            <noscript>  
                <strong>Please enable JavaScript to continue.</strong>  
            </noscript>  
            <div id="app"></div>  
              
        </body>  
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmRkeV94_size_16_color_FFFFFF_t_70][]

> 2.在vue文件内使用video.js初始化播放器

<template>
    	<view><view class="video-js" ref="video"></view></view>
    </template>
    
    <script>
    export default {
    	onReady() {
    		// #ifdef H5
    		var video = document.createElement('video');
    		video.id = 'video';
    		video.style = 'width: 100%; height: 150px;';
    		video.controls = true;
    		var source = document.createElement('source');
    		source.src = 'http://yun-live.oss-cn-shanghai.aliyuncs.com/record/yunlive/record/yunlive/meeting_1070/2020-11-25-09-27-59_2020-11-25-09-35-52.m3u8';
    		video.appendChild(source);
    		this.$refs.video.$el.appendChild(video);
    		videojs('video');
    		// #endif
    	}
    };
    </script>
    
    <style>
    .video-js {
    	width: 100%;
    	height: 300rpx;
    }
    </style>

**效果如下** ：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmRkeV94_size_16_color_FFFFFF_t_70 1][]

[Link 1]: https://ask.dcloud.net.cn/article/35442
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmRkeV94_size_16_color_FFFFFF_t_70]: /images/20221005/2770c80fa48a4f59b7252468e1b7764e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmRkeV94_size_16_color_FFFFFF_t_70 1]: /images/20221005/ae70f22474324f05b8083ff94ff81d5f.png